15

我正在修改自定义网格，想看看其他人是如何创建他们的网格系统的。由于 twitter 的引导程序似乎很受欢迎，我查看了它的代码。现在我想知道他们为什么要使用花车？我会使用display: inline-block;html 元素，display: inline;或者display: block;我会尽量避免浮动。但出于某种原因，引导程序创建者决定使用浮点数。首先，我认为他们使用它们具有向后兼容性，因为 ie6 不支持display: inline-block;而 ie7 仅在display: inline;默认情况下支持元素。但是 ie6 或多或少退出了游戏，因为他们使用使用 *zoom: 1;的micro clearfix hack 。以ie6+ IMO为目标，他们可以复制相同的display: inline-block;*display: inline; *zoom: 1;所以最后一个问题为什么浮动在显示内联块上？他们试图解决我上面没有提到的任何问题吗？

4

3 回答 3

16

内联块可以识别空白，具有实际内容的自动宽度，并按照它们在 HTML 中的顺序堆叠。浮点数不是但需要 clearfix 方法，并且基于块元素。这些元素在水平可用空间上具有自动宽度。纯粹从语义上讲，内联块的语义较少，因为空格感知格式和顺序的重要性。但是纯粹从功能的角度来看，两者都不是为网格而设计的。如果不是伪 CSS，我们也会有非语义的 HTML 标签 clearfixe。所以在我看来，他们都不是赢家。但是当 flexbox 将在未来几年成为强制性时，暂时没有其他选择。

使用内联块：

<div>
    <div style="display:inline-block; width:30%;">col1
    </div><div style="display:inline-block; width:70%;">col2</div>
</div>

标签必须粘在一起/附加，以消除任何排水沟。容器 div 是强制项目成为单独行的一部分所必需的。

带花车：

<div class="clearfix">
    <div style="float:left; width:30%;">col1</div>
    <div style="float:left; width:70%;">col2</div>
</div>

Clearfix 是强制“行”所必需的（在浮动后消除任何正常的流程项目问题或浮动）

是否使用其中一种取决于您的目标（和品味）。我必须说我喜欢 inline-blocks 多于浮动，只要你知道 col 宽度或使用相对大小 (%)。我认为它比带有 clearfix 的浮动更直观和可预测，如果按照应该如何使用它来解决甚至不是问题的问题，那么它的修复。只有内联块的空白意识会迫使你使用一些时髦的 html ，这是一个缺点。

具有讽刺意味的是，表格完全可以完成所有这些（甚至是高度和垂直对齐），没有任何问题。由于必须按顺序放置内联块，因此这里有一个讨论的动机。

如果我们谈论的是响应式的，表格会“丢失”内联块。假设您在台式机上有 4 个 cols，而您希望在平板电脑上有 2 个 cols，而在移动设备上有 1 个 cols。使用内联块，您“只是”为 cols 提供其他宽度尺寸，并且它们希望包裹得很好（注意它们折叠时的边距）。使用表格，您必须绑定到实际的行，这可能非常顽固。Flexbox 用了很久，看起来很漂亮。您可以在某些情况下灵活调整布局。

Bootstrap 可以很方便地了解他们是如何做某事的。只需阅读 3.0，他们正在使用相对网格大小。这给嵌套网格和对齐带来了问题。

----  --a-  ----  ----
---b------
....  ..c.

Col a 是一个正常的父 col。Col c 是 b 的子嵌套 col。除非您使用填充和边框模型，否则很难将 c 与具有相对大小的 a 对齐，因为装订线对于容器是可变的。但是那样你会失去很多灵活性。当您希望 col 具有一些背景和填充时，您会弄乱网格系统，因此您必须使用您设置样式的容器，这会使代码混乱。我还没有研究他们是否找到了解决方案。我还没有。我使用了固定像素，但这意味着在响应式设计中你只能有几个固定宽度，并且对于移动设备周围的一切都使用相对网格。

于 2013-01-27T13:00:25.200 回答
2

我更喜欢使用display: inline-block;而不是的网格系统float，例如Pure（以前的 Yahoo YUI Grid），因为它们在没有额外样式的情况下实现了国际化；将文本方向更改为从右到左，布局自动反转；花车不这样做。浮动还引入了清除和其他跨浏览器奇怪的需要。正如 Pure 所证明的那样，任何inline-block可能出现的错误都可以得到纠正。至于不应该用于布局float的批评，也许跨浏览器中心也应该禁止使用。我也会质疑语义网这个词是否display: inline-block;display: table;确实适用于 CSS，因为该术语主要关注 HTML 并使用其元素和属性来赋予机器可读的含义；CSS 的全部意义在于按照人们的意愿彻底地设置语义 HTML 的样式，因此是CSS Zen Garden等经典网站。

我说只要该技术没有利用漏洞，没有阻碍用户和设备的内容并且得到足够的支持，那么它是可以接受的。没有理由不能以非正统但受支持的方式使用 CSS，就像 Stu Nicholls 的 CSSPlay。

有趣的是，Flexible Box也被合并到 Pure grids 中，这是一种与现代浏览器（≥IE10 和等效浏览器）兼容的高级布局系统。

于 2015-08-16T18:49:25.430 回答
-3

在语义网的术语中，display: inline-block当我们想要<img>在文本行中放置块级元素时应该使用。我们不应该使用内联布局来制作页面的主要布局。with 的元素也会从父元素的和等display: inline-block属性中生效。这会降低页面布局的准确性。您最好养成使用而不是在制作页面主布局时的习惯。font-sizeline-heightfloatinline-block

于 2013-01-03T22:25:39.593 回答