为什么浮子不做文字包装？
为什么浮子不做文字包装？
提问于 2015-07-30 16:56:30
如下面的代码所示，我已经将float:left应用于图像，float:right应用于文本。然而，图像仍在覆盖文本。
我想要的是文本正确的图像(在开始)和底部的图像(稍后)。基本上，--我想将文本包装在图像周围。
#intro_page p{
line-height: 27px;
float: right;
}
#intro_main_text{
float: right;
}
.intro_pic1{
float: left;
clear: left;
position: absolute;
}<div id="intro_page" class="unseen">
<div id="intro_page_content">
<p id="intro_main_text" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<figure class="intro_pic1">
<img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
<figcaption>Sample Image 2015</figcaption>
</figure>
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-07-30 17:07:00
在您交换图像和段落的顺序时，只需将图像左浮动并将CSS简化为：
#intro_page p {
line-height: 27px;
}
.intro_pic1 {
float: left;
}<div id="intro_page" class="unseen">
<div id="intro_page_content">
<figure class="intro_pic1">
<img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
<figcaption>Sample Image 2015</figcaption>
</figure>
<p id="intro_main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
Stack Overflow用户
发布于 2015-07-30 17:12:11
如果将figure元素移动到p元素之上，您可以简单地浮动figure元素，文本将自动围绕它流动。看看这小提琴，看看它的行动。
下面是修改后的HTML/CSS：
<div id="intro_page" class="unseen">
<div id="intro_page_content">
<figure class="intro_pic1">
<img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
<figcaption>Sample Image 2015</figcaption>
</figure>
<p id="intro_main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>CSS
#intro_page p {
line-height: 27px;
}
.intro_pic1 {
float: left;
}Stack Overflow用户
发布于 2015-07-30 17:05:18
浮车似乎把事情搞砸了。试试这个，http://jsfiddle.net/8r20z6t1/
#intro_page p{
line-height: 27px;
}
#intro_main_text{
}
.intro_pic1{
float: left;
clear: left;
}
<div id="intro_page" class="unseen">
<div id="intro_page_content">
<figure class="intro_pic1">
<img src="http://sample.com/images/freeproductsamples.jpg" alt="Sample" height="250" />
<figcaption>Sample Image 2015</figcaption>
</figure>
<p id="intro_main_text" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31729771
复制相关文章
相似问题
腾讯云开发者
