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。

<强>预线 - 此值将导致空格序列折叠为单个空格字符。换行将在任何地方发生必须填写行框，并在标记的新行（或在在生成的内容中出现“\ a”）。换句话说，它就像正常，但它会尊重明确的换行符。

您可以在此处找到有关空白区域的更多信息：

要完成，您可以使用这些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的CSS声明（pre-line和inline-block修复）。它应该对其他有类似问题的人有用。

Answer 2

如果你删除display: inline-block;，他们会将一个堆叠在另一个上面。

块级元素从新行开始，默认情况下DIV是块级。

Answer 3

将display:inline-block更改为display:table可能会成功。

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

Answer 4

或者你可以在内联块之后添加一个带显示块的div。

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

然后

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

清除内联块？

4 个答案: