Question

粗略地说，尝试构建一个四列布局，我有这个HTML：

<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%;
}

- ＆GT; Fiddle me this＆lt; -

在浏览器中渲染时（目前，我一直在使用Chrome进行测试），渲染嵌套div元素之间的空白（在此示例中，空格是由换行符引起的），从而抛出我的布局。

显然，我可以浮动我的嵌套div ...

div {
    background: #ccc;
}

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

- ＆GT; Fiddle me that＆lt; -

然后我的容器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空白在浏览器中呈现时使用{{ 1}？或者是否可以使用没有令人不快的副作用的内联块的替代方案？

修改

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

我的“替代方法”

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

display:inline-block

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

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

Answer 1

您为这个大布局问题提供了几乎所有可能的解决方案。我只想指出我的首选解决方案。

将父级的font-size设置为0并使用REM再次重置它。

如果父div（而不是子div）中没有其他文本，则您的代码和布局没有问题。

REM（相对EM）与父元素的字体大小（如普通EM的大小）无关，而是相对于文档的根元素 - html元素。

<强> HTML：

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

<强> CSS：

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}

没有浏览器支持：

IE8及以下版本：添加基于像素的字体大小以使其正常工作。
IE9 / 10：不使用font - 速记;请改用font-size！
（Opera Mini＆amp; iOS 3.2）

Answer 2

有没有...使用display：inline-block阻止HTML空格在浏览器中呈现的方法？

是的，有几种方法。他们都没有真正符合您的“无黑客”标准。并且＆＃tidy＆＃39;，但他们确实有效。

重新格式化（＆＃39;缩小＆＃39;）您的代码，以便它们之间没有任何空格。
这可能是最无破解和跨浏览器的解决方案。它不一定是整洁的，它意味着你通过调整HTML而不是CSS来修复你的布局，这不是理想的。但它确实运作良好。如果您希望保持代码的可读性，可以使用HTML注释，这样您就可以保留差距但不将它们放在DOM中：
```
   <div>block 1</div><div>block 2</div><div>block 3</div>
```
仍然不理想，但比大量单行代码更具可读性。
将容器的font-size设置为零，然后为块重新设置为完整尺寸。
这非常有效。它是一个纯粹的CSS解决方案，很容易做到。缺点是，如果你有相对的字体大小，可能很难处理（即设置回14px很好，但设置为1em不会起作用，因为以前字体大小为零的1em仍为零。
设置1em负余量以缩小差距这也很有效，但可能不精确。

或者是否可以使用没有令人不快的副作用的内联块的替代方案？

总是float:left。但是，它有各种各样的问题。如果您正在使用inline-block，则赔率很高，因为您不想使用浮动广告。
使用position:absolute并手动执行布局。

Answer 3

您可以使用您在问题中描述的浮动方法，但是您没有清除浮动，这就是容器崩溃的原因。

一个好的方法是使用::after伪元素附加到容器元素来“自动清除”它自己：

 div:after {
    content: "";
    display: table;
    clear: both;
}

http://jsfiddle.net/s2rJW/3/

Answer 4

当我看到你的＆＃34;解决方法＆＃34;我在想：为什么不使用<table>？

然后我想出了这个：

＆＃13;

div {
  background: #ccc;
  display: table;
  width: 100%;
}
div div {
  background: #eee;
  display: table-cell;
  width: 25%
}

＆＃13;

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

＆＃13;

如何停止在浏览器中呈现的内联块空格

4 个答案:

将父级的font-size设置为0并使用REM再次重置它。