<div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
</div>

我有这个CSS：

div {
    background: #ccc;
}

div div {
    background: #eee;
    display: inline-block;
    width: 25%;
}

– > Fiddle me this< - 当在浏览器中呈现时(目前,我一直在使用Chrome进行测试),渲染嵌套div元素之间的空白(在此示例中,空格是由换行符引起的),从而抛出我的布局. 显然,我可以浮动我的嵌套div …

div {
    background: #ccc;
}

div div {
    background: #eee;
    width: 25%;
    float: left;
}

– > Fiddle me that< - 但后来我的容器div崩溃了,我不想必须使用CSS clearfix hacks或额外的HTML来打开它. 或者,我可以修改我的HTML,以便删除空格…

<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>

但这使得它难以使用.打破标签以使其变得更具可读性的另一种选择让我感觉很脏……

<div>
    <div>A column</
    div><div>A column</
    div><div>A column</
    div><div>A column</div>
</div>

我发现了一个resource或two(我没有在SO上找到任何东西),但我不喜欢任何解决方案 – 它们都是变通方法,如果必须,我会很乐意,但肯定会有另一种选择吗？

所以我的问题是……有一个跨浏览器,符合w3c标准,非javascript,无黑客,整洁的HTML,防止HTML空白在浏览器中呈现时使用display：inline-block ？或者是否可以使用没有令人不快的副作用的内联块的替代方案？

编辑

假设这确实是不可能的,那么最好的解决方案就是不需要添加HTML标记和“灵活”的CSS.换句话说,网站管理员可以正常编辑HTML而不考虑破坏布局,而CSS(黑客或其他)将容纳网站管理员的修正,而无需自行修改.

我的“办公室”

好吧,它看起来像是要给予的东西.在我的情况下,拥有不需要额外标记的HTML更为重要,因此最好的解决方案是在“无法正常工作”的CSS黑客中工作.解决方案是浮动嵌套的div并添加一个hack …

div div {
    float: left;
}

div::before,div::after {
    content: "";
    display: table;
}

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

…这是我已经使用了一段时间并且希望避免的修复的推导.修复程序的这个修复版本是在on this site找到的.

所以现在标记中的每个div都已经应用了clearfix hack,无论它是否需要它.我还没有通过应用于所有div来了解它是否有任何不良副作用 – 我期待在任何问题浮出水面时进行调试和修复;-)