如果你想在容器底部的div,你如何让文本环绕div？我可以弄清楚如何让文本环绕div,只要它在顶部,但如果我尝试将其推到页面的底部,文本要么不会继续跨越div的顶部或者div被推到文本前面.目前,我有一个容器div,然后黑暗的盒子是该div中的另一个div.
我正在努力创造这个
解决方法
你只需要使用float属性.
HTML：
<div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" alt="GTA V" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
CSS：
div img {
width: 240px;
float: right;
padding: 25px;
}
更新
使用纯CSS,您将获得的最多是使用绝对定位手动间隔图像的边.
HTML：
<div class="left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" style="width: 240px; height: 140px;">
CSS：
img {
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
margin-top: 60px;
}
.left,.right {
width: 49%;
}
.left {
float: left;
}
.right {
float: right;
}
.left:before,.right:before {
content: "";
width: 125px;
height: 200px;
}
.left:before {
float: right;
}
.right:before {
float: left;
}
更多信息
您可以在this topic,on StackOverflow中找到更多信息.
