Question

简单地在图像周围浮动文本，但在IE7中表现不佳。文本被推到图像下方，就像没有浮动一样。

从我读过的，其原因可能是图像和文本在浮动（和固定的宽度/高度）div内，这可能会触发包含div的“hasLayout”。我一直在寻找一个干净的解决方法，但还没有找到。

在最坏的情况下，我想我可以使用jQuery，因为我已经在页面上使用它，但我更愿意用CSS解决这个问题。

Here is a fiddle，在良好的浏览器中运行良好，但在IE7中应该会失败。

好（Firefox，Safari，Chrome，Opera，IE8 +）：

Good image

糟糕（IE7）：

Bad image

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的解决方案必须非常灵活，因为可以有任意数量的这些框，并且它们必须在中心浮动（jQuery用于一次只显示一行）。盒子也可以是4种不同固定宽度中的任何一种。

另外，由于图像可以是2个宽度（2个不同的CSS类别）中的一个，或根本不存在，因此这进一步复杂化。我考虑过将图像位置设置为绝对值并使用边距进行，但因此失败了。

Answer 1

将此代码添加到CSS

中

.box p{
    float:left;
     width: 130px;    
}

http://jsfiddle.net/2VbGq/1/

Answer 2

Aw废弃它。我的错。

事实证明IE7中的小提琴工作正常，问题是我有一个全局的css规则，用于设置min-width的“header”元素。我在盒子里使用了标题元素......现在感觉很聪明。

感谢所有试图提供帮助的人。

Answer 3

尝试这样....删除“P”标签的内容任何图像浮动到左边希望这将工作...

IE7浮动文本在浮动div内的图像周围

3 个答案: