7

粗略地说，尝试构建一个四列布局，我得到了这个 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%;
}

->摆弄我这个<-

在浏览器中渲染时（目前，我只使用 Chrome 进行测试）嵌套的 div 元素之间的空白（在此示例中，空白是由换行符引起的）被渲染，因此我的布局被丢弃了。

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

div {
    background: #ccc;
}

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

->摆弄我<-

但是后来我的容器 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>

我找到了一两个资源（我在 SO 上找不到任何东西），但我真的不喜欢任何解决方案 - 它们都是解决方法，如果我必须接受，我会接受，但肯定有替代方案吗？

所以我的问题......是否有一种跨浏览器、符合 w3c、非 JavaScript、无黑客、整洁的 HTML、防弹的方式来防止 HTML 空白在使用时在浏览器中呈现display:inline-block？或者是否有可以使用没有令人不快的副作用的 inline-block 替代方法？

编辑

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

我的“解决方法”

好吧，看起来必须付出一些代价。在我的情况下，拥有不需要额外标记的 HTML 更为重要，因此最好的解决方案是在“只是工作”无形的 CSS hack 中工作。解决方案是浮动嵌套的 div 并添加一个 hack ......

div div {
    float: left;
}

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

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

...这是我已经使用了一段时间并希望避免的修复的派生。此修复的简洁版本可在此站点上找到。

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

4

4 回答 4

6

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

将父级的字体大小设置为 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-shorthand；改用font-size！
  • (Opera Mini & iOS 3.2)
于 2013-06-05T09:42:13.960 回答
1

有没有一种方法可以防止在使用 display:inline-block 时在浏览器中呈现 HTML 空白？

是的，有几种方法。它们中没有一个真正符合您“无黑客”和“整洁”的标准，但它们确实有效。

  • 重新格式化（“缩小”）您的代码，使其元素之间没有任何空白。
    这可能是最无黑客和跨浏览器的解决方案。虽然它不一定很整洁，这意味着您通过调整 HTML 而不是 CSS 来修复布局，这并不理想。但它确实运作良好。如果你想让你的代码保持可读性，你可以使用 HTML 注释，这样你就可以保持差距，但它们不会在 DOM 中：

       <div>block 1</div><!--
--><div>block 2</div><!--
--><div>block 3</div>

    仍然不理想，但比大量的单行代码更具可读性。

  • 将容器设置font-size为零，然后将块再次设置回全尺寸。
    这真的很好用。这是一个纯 CSS 解决方案，而且很容易做到。不利的一面是，如果您有相对的字体大小（即设置回14px为很好，但设置为1em将不起作用，因为1em先前的字体大小为零仍然为零），则可能难以使用。

  • 设置1em负边距以缩小差距。
    这也很有效，但可能不精确。

或者是否有可以使用没有令人不快的副作用的 inline-block 替代方法？

  • 总是有的float:left。但这有一系列不同的问题。如果您正在使用inline-block，那么很有可能是因为您不想使用浮点数。

  • 使用position:absolute并手动进行布局。

于 2013-06-05T09:29:19.437 回答
0

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

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

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

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

于 2013-06-05T09:27:25.040 回答
0

当我看到您的“解决方法”时，我在想：您为什么不使用 a <table>？

然后我想通了：

div {
  background: #ccc;
  display: table;
  width: 100%;
}
div div {
  background: #eee;
  display: table-cell;
  width: 25%
}
<div>
  <div>A column</div>
  <div>A column</div>
  <div>A column</div>
  <div>A column</div>
</div>

于 2017-01-28T05:22:02.833 回答