Question

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

问题是什么？我错过了哪些错误或两者兼而有之？

Answer 1

当你把它们放在多行时浮动可能会很奇怪。一种解决方案是在每列之后添加一个隐藏的div来对它们进行排序。通常的惯例是给它类名“clear”，这个CSS：

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

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

编辑：请注意有很多不同的方法可以解决这个问题，你可以用一些其他CSS包装DIV中的每一行，有些人更喜欢并且可能会考虑整洁。在你的情况下，它仍然是一个额外的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;
}

Answer 2

你把这段代码放在第一行之后。

<div style="clear:both"></div>

http://jsfiddle.net/DSGCv/1/

3行每行，第2行不对齐。的jsfiddle

2 个答案: