-2 
<ul style="overflow-y: auto;">
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
</ul>

这里是否需要某种 clearfix？还是每个浮动<img/>只影响其对应的内容<li>？

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}
4

2 回答 2

2

默认情况下不包含浮点数。如果图像高于<li>，它们会将以下内容推<li>到右侧（向左浮动）。

clearfix 的一些替代方法可以是强制一个新的块格式化上下文。LI 将延伸到其内容，因此一种流行的方法是：

li {
    overflow: hidden;
}

比较http://jsfiddle.net/NvHVa/与http://jsfiddle.net/NvHVa/1/

触发块格式化上下文的其他方法：https ://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

有关解释和更好的方法，请查看http://colinaarts.com/articles/float-containment/

于 2013-07-01T12:31:23.860 回答
1

overflow:auto;看起来像在这里工作...我认为正确的方法是将 img 作为 li 图像.. 但是 w/e ;D

演示：http: //jsfiddle.net/goodfriend/EsgVH/14/

HTML：

<ul>
    <li><img>some texsome text.. some text.. some text.. some text.. t...</li>
    <li><img>some text.. some text.. some text.. some text.. some text.. somesome text.. some text.. some text.. some text.. some text.. some text.. some text.. some text.. some text.. some text..  text.. some text.. some text.. .</li>
    <li><img>some tesome text.. some text.. xt...</li>
</ul>

CSS：

img{
    float:left;
    width:50px;
    height:50px;
    border: 1px solid blue;
    margin-right:5px;
}

li{
    overflow-y:auto; // or just the overflow:auto;
    margin-bottom:5px;
}
于 2013-07-01T12:38:18.383 回答