html - 每行3个框，第二行不对齐。 JS fiddle

我有两行，每行3个框，每个框包括图像，标题和文本。第二行不对齐。我为此设置了一个JS小提琴，以向您展示我的问题：

http://jsfiddle.net/2QJhN/

有什么问题我错过/错了什么或两者都错了？

最佳答案

当您将浮动对象放置在多行中时，它们可能会很奇怪。一种解决方案是在每列之后添加一个隐藏的div以便对其进行排序。通常的惯例是使用以下CSS为它赋予类名“ clear”：

.clear
{
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

http://jsfiddle.net/2QJhN/3/

编辑：请注意，有很多不同的方法可以解决此问题，您可以将DIV中的每一行与其他CSS包裹在一起，有些人喜欢这样做，可能会考虑整洁。在您的情况下，它仍然是一个额外的DIV。

您可以给它一个类名“ clearfix”：

.clearfix:after, .windowContent:after, .pane:after
{
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;

}

* html .clearfix , * html .windowContent , * html .pane
{
    zoom: 1;
}
*:first-child+html .clearfix , *:first-child+html .windowContent, *:first-child+html    .pane
{
    zoom: 1;
}

关于html - 每行3个框，第二行不对齐。 JS fiddle ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9412124/