清除内联块？

Question

我有

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}

然后

<div class="centered-holder">misc content 1</div>
<div class="centered-holder">misc content 2</div>
<div class="centered-holder">misc content 3</div>

我只想要每行一个最大值,这实际上是否有可能？这是一个iPhone HTML5应用程序,因此较旧的浏览器限制不是问题.

Answer 1

取决于您的CSS声明和标记,但您可以尝试将此CSS声明放在父容器上:

white-space: pre-line;

使用此方法可以避免将其转换.centered-holder为块元素,并且仍然可以使用例如text-align:center父容器上的元素.

pre-line - 此值将导致空格序列折叠为单个空格字符.在需要填充行框的地方以及标记中的新行(或生成的内容中出现"\ a")时会发生换行符.换句话说,它是正常的,除了它会尊重明确的换行符.

你可以在这里找到更多关于白空间的信息:

• http://reference.sitepoint.com/css/white-space
• http://www.w3.org/TR/css3-text/#white-space

要完成,您可以使用这些CSS声明:

.parent-container {
    white-space: pre-line /* Create new line for each DIV */;
    line-height:0 /* Mask the extra lines */;
    *white-space: pre /*FixIE7*/;
    *word-wrap: break-word /*FixIE7*/;
}

.centered-holder {
    display: inline-block;
    line-height:100% /* Restore a default line-height */;
    *display: inline /*FixIE7*/;
    *zoom: 1 /*FixIE7*/;
}

我发现这个问题非常有趣,所以我也给出了IE6-7(pre-line和inline-block修复程序)的CSS声明.它应该对其他有类似问题的人有用.

Answer 2

更改display:inline-block为display:table可能会奏效。

默认情况下，表格会清除它的兄弟元素（如块 div），并且它的宽度会扩展以适应其内容（如内联 div）。