清除内嵌块？

我已经清除内嵌块？

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

来源

2011-11-18 Baconbeastnz

的'clear'属性只会影响浮动的元素，你有什么浮动。 – animuson

实际上清除不需要应用于浮动元素，您可以将其应用于内联元素以阻止它弹出。我需要一些类似的解决方案 – Baconbeastnz

不，它不需要应用于*浮点*元素，但它只会清除*浮点*元素。它不会“清除”内嵌块元素，因为它不在左侧或右侧“浮动”。如果你想让他们在不同的线路上，下面的解决方案应该工作。也许你可以提供一个你正在尝试做的更好的例子。 – animuson

依赖于你的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（pre-line和inline-block修复）的CSS声明。对于有类似问题的其他人应该是有用的。

来源

2011-11-18 03:26:32 Etienne

不错的答案...... + 1 – anglimasS

非常感谢你的回答：）发现你的主内容区域也可以只有一个块，然后敲一个text-align：center;在他们。然后放入内联块。通过这样做你的内容是居中的（因为父块跨越全宽，并且将内联块置于中心） – Baconbeastnz

你拥有它的兄弟:)！ –

如果您删除display: inline-block;，它们将堆叠一个在另一个之上。

块级元素从新行开始，DIV默认为块级。

来源

2011-11-18 02:46:36 enduro

是的，我知道这一点。事情是我有文本对齐：在我的容器中心因为我喜欢自动居中能力，看起来像我可能必须这样做与JS – Baconbeastnz

您可以随时添加： .centered持有人：后{ 内容：“\一个”; } 虽然看起来像一个黑客。 – enduro

或者你可以在内联块之后添加一个带有显示块的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>

来源

2013-09-10 17:08:07

这是非常糟糕的做法，非常黑客。 – 30secondstosam

嗯，这是CSS。哈克是第二个名字。 – zundi

这也可以用pseudoelements来完成，使它不那么黑客。参见http://codepen.io/ivancamilov/pen/jqmWEL –

清除内嵌块？

回答

相关问题