Question

我正在修改自定义网格，并希望了解其他人如何创建其网格系统。由于twitter的 bootstrap 似乎如此受欢迎，我已经查看了它的代码。现在我想知道为什么他们使用浮动？我会使用display: inline-block; html元素有display: inline;或display: block;我会尽量避免使用浮点数。但由于某些原因，bootstrap创建者决定使用浮动。首先我认为他们使用它们具有向后兼容性，因为ie6不支持display: inline-block;并且ie7仅在具有display: inline;的元素上支持它。但是ie6或多或少不在游戏中，因为他们使用micro clearfix hack使用* zoom：1;要定位 ie6 + IMO他们可以使用display: inline-block;复制相同的*display: inline; *zoom: 1;所以最后的问题为什么浮动显示内联阻止？他们是否有任何问题试图解决我上面没有提到的？

Answer 1

内联块可识别空白区域，具有实际内容和堆栈的自动宽度，按照HTML中的顺序排列。 Floats不是但需要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强制“行”（解除任何正常的流项目问题或浮动后浮动）

使用一个或另一个是你的目标（和品味）的问题。我必须说我喜欢内联块而不是浮点数，只要你知道两个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与相对尺寸对齐，除非您使用填充和边框模型。但是这样你就失去了很多灵活性。如果你想让col有一些背景和填充，你就搞乱了网格系统，所以你必须使用你设计的容器，这会使代码混乱。我没有研究过他们是否找到了解决方法。我还没有。我去了固定像素，但这意味着在响应式设计中你只能有一些固定的宽度，而且对于移动设备周围的一切都使用相对网格。

Answer 2

我更喜欢使用display: inline-block;而不是float的网格系统，例如Pure（以前称为Yahoo YUI Grid），因为它们没有额外的样式而国际化;将文本方向更改为从右到左，布局自动反转;花车不这样做。 Floats还介绍了清除和其他跨浏览器奇怪的需求。正如Pure所证明的那样inline-block可能超过float的任何不准确都可以得到纠正。至于display: inline-block; 不用于布局的批评，也许禁止使用display: table;进行跨浏览器居中。我还要质疑术语 Semantic Web 是否真的适用于CSS，因为该术语主要涉及HTML并使用其元素和属性来赋予机器可读的含义; CSS的全部意义在于根据需要对语义HTML进行根本设置，因此经典网站如 CSS Zen Garden 。

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

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

为什么bootstrap在.span上使用浮点数而不是display：inline-block？

2 个答案: