处理图像周围的简单 float 文本，但在 IE7 中效果不佳。文本被推到图像下方，就好像没有 float 一样。
根据我的阅读，出现这种情况的原因可能是图像和文本位于 float (和固定宽度/高度)的 div 中，这可能会触发包含 div 的“hasLayout”。我一直在寻找一个干净的解决方法，但还没有找到。
在最坏的情况下，我想我可以使用 jQuery，因为我已经在页面上使用了它，但我更愿意使用 CSS 来解决这个问题。
Here is a fiddle , 在好的浏览器中运行良好，但在 IE7 中应该会失败。
良好(Firefox、Safari、Chrome、Opera、IE8+):
差(IE7):
HTML:
<html>
<body>
<div id="box_section">
<div id="container1">
<div id="container2">
<div class="box">
<img src="http://c69282.r82.cf3.rackcdn.com/robot.jpg"/>
<p>Lorem ipsum etc etc whatever.</p>
</div>
<div class="box">
<img src="http://c69282.r82.cf3.rackcdn.com/pushing278.jpg"/>
<p>Lorem ipsum etc etc whatever.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/* Container for floating boxes */
#box_section
{
height: 300px; /* Fixed height and width */
width: 984px;
margin-top: 35px;
padding: 0;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
/* Containers used to centre floated items independent of number */
/* In real webpage there can be any number of boxes. */
#container1
{
padding: 0;
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#container2
{
clear:left;
float:left;
padding:0;
position:relative;
left:50%;
}
/* The box. OMG. */
.box
{
float: left;
position:relative;
right:50%;
height: 190px; /* Note fixed height and width */
width: 350px;
border-style: solid;
border-color: #ebead4;
border-width: 1px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin: 20px;
overflow: hidden;
}
/* Goal is to float text around image. Note that images have fixed width/height.
Images snatched from random website for demonstration purposes. */
.box img
{
float: left;
margin-right: 15px;
height: 180px;
width: 200px;
border-style: solid;
border-radius: 5px;
border-color: #eeeeff;
border-width: 1px;
}
请注意，包含 div 的解决方案必须非常灵活，因为可以有任意数量的这些框，并且它们必须 float 在中心(jQuery 用于一次只显示一行)。盒子也可以是 4 种不同的固定宽度中的任何一种。
此外，由于图像可以是 2 种宽度之一(2 种不同的 CSS 类)，或者根本不存在，这使情况变得更加复杂。我考虑过使图像位置绝对并带有边距，但因此失败了。
最佳答案
关于css - IE7 在 float div 中围绕图像 float 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14850257/