清除内联块? [英] Clearing inline-blocks?

问题描述

我有

.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应用程序，因此旧的浏览器限制不再是问题.

I only want one max per line, is this actually possible somehow? It's an iPhone HTML5 app so older browser restrictions aren't an issue.

推荐答案

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

Depend of your CSS declarations and your markup, but you can try to put this CSS declaration on the parent container:

white-space: pre-line;

通过这种方法，您避免将.centered-holder转换为块元素，并且仍然可以在父容器上使用例如text-align:center.

With this approach you avoid to transform the .centered-holder to a block element, and you can still use for example the text-align:center on the parent container.

前行 -此值将导致空白序列折叠为单个空格字符.换行符将在任何地方发生 填充行框以及在标记中的新行处(或在 在生成的内容中出现"\ a").换句话说，这就像 正常，只是会采用明确的换行符.

pre-line - This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.

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

You can find more informations here about white-space:

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

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

最后，您可以使用以下CSS声明:

To finish, you can use these CSS declarations :

.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修复程序).对于其他有类似问题的人来说，它应该很有用.

I found this question very interesting, so I give also the CSS declarations for IE6-7 (pre-line and inline-block fixes). It should be usefull for some other people which have a similar problem.

这篇关于清除内联块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！