Question

我正在创建一个平铺的图像网格，就像一个带有缩略图网格的图像库，我需要将图像包裹在3个图像之后的下一行。所以我浮动了一堆div，每个div包含一个图像，然后在三个图像后手动清除浮动。

问题是我在一个相当复杂的现有模板中工作，该模板已经使用float来安排所有事情。清除网格中的浮动会扰乱整个页面，大概是因为它清除了页面中的每个浮点数。我能做什么？

我正在通过插入空白div来清除浮动。即：

<div style='clear:right'>

清除花车的其他一种方法可能会更好吗？

Answer 1

创建一个合适的容器div（如果你还没有一个）
在屏幕上设置限制宽度容器div - 相同的 3张图片占用了。
允许所有图像浮动 - 它们会自动换行。
设置容器div '溢出：隐藏'，这将清除漂浮物给你。

简化版可能如下所示：

<style>

div#container {  
  overflow: hidden; 
  width: 300px; 
}

div#container img { 
  float: left; 
  width: 100px; 
}

</style>

<div id="container"> 

  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />

</div>

Answer 2

如果你的标记是这样的话：

div
 img
 img
 img
 row break
 img
 img
 img
 ...

然后你需要在每三个块之后添加它：

<br class="clear" />

但如果您的标记是这样的：

div
 div
  img
  img
  img
 div
  img
  img
  img
 ...

..那么你只需要将以下.clear类应用于你的内部DIV。

无论哪种方式，请将其添加到样式表中：

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

您可以将此类用于包含浮点数的所有其他元素。

Answer 3

如果IE＆gt; = 8支持对您没问题，您可能需要考虑使用display: table而不是浮点数。由于您想要显示网格，这是更合适的方式。

http://www.quirksmode.org/css/display.html#table

Answer 4

我尝试使用display: inline-block;来设置包含每个图像的元素的样式。一个容器的HTML代码示例：

<style>
.figure {
    display: inline-block;
}
</style>

<div class="figure">
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" />
</div>

现在使用IE6，IE7和Firefox 2有一些陷阱：

IE 6和7只会设置已触发hasLayout的内联元素，我的意思是如果你这样做，你会看到内联块行为：

<!--[if lte IE 7]>
.figure {
    display: inline;
    zoom: 1; /* triggering hasLayout */
}
<![endif]-->

Firefox 2无法理解display: inline-block;因此您必须在后者之前使用另一条显示指令：

.figure {
    display: -moz-inline-stack;
    display: inline-block;
}

现在Firefox 2会让你烦恼一下。首先，您的.figure元素中必须只有一个子元素，否则子元素会堆叠。因此，如果您的图像下有图例，请在div.figure和img + p


    <div>
        <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" />
        <p>Second child of .figure>div and not .figure</div>
    </div>
</div>

第二个（仍然只在Fx2中），你会不时地注意到你不能再选择-moz-inline-stack'ed元素中的文本，也不能点击它可能包含的链接。修复方法是相对定位添加的div：

    .figure div {
        position: relative;
    }

当然，IE6 / 7的条件注释必须在常规CSS之后发生，否则它将没什么帮助。

最后，如果没有优雅的解决方案适合您，请使用TABLE。一个只有td而没有th的简单表。如果它出现：

IE6和7不喜欢display: table-sth
您的CMS会导致其他网站无法正常工作的问题
Firefox 3对inline-block的支持无济于事

是的，对于每个人来说，使用表格并且没有半解决方案会对一半用户造成问题更好;）

清除嵌套浮动

4 个答案: