问题描述
我正在修改自定义网格,并想看看其他人是如何创建他们的网格系统的.由于 twitter 的 bootstrap 似乎很受欢迎,所以我查看了它的代码.现在我想知道 他们为什么要使用浮点数? 我会使用 display: inline-block;
html 元素有 display: inline;
或 >display: block;
我会尽量避免浮动.但出于某种原因,引导程序创建者决定使用浮点数.首先我认为他们使用它们具有向后兼容性,因为 ie6 不支持 display: inline-block;
而 ie7 仅在默认情况下支持具有 display: inline;
的元素.但是 ie6 或多或少退出了游戏,因为他们使用 micro clearfix hack 使用 *zoom: 1;以 ie6+ IMO 为目标,他们可以使用 *display: inline; 复制相同的
所以最后一个问题为什么会在显示内联块上浮动?他们有没有试图解决我上面没有提到的问题?display: inline-block;
*zoom: 1;
I was tinkering with custom grid and wanted to see how other people have created their grid-systems. Since twitter's bootstrap seemed to be so popular i've looked at its code. Now i wonder why are they using floats? I would use display: inline-block;
html elements have either display: inline;
or display: block;
i would try to avoid floats. But for some reason bootstrap creators decided to use floats. first i was thinking they used them to have backward compatibility since ie6 does not support display: inline-block;
and ie7 supports it only on elements with display: inline;
by default. But ie6 more or less out of the game and since they use micro clearfix hack which uses *zoom: 1; to target ie6+ IMO they could replicate the same display: inline-block;
with *display: inline; *zoom: 1;
So the final Question Why Floats Over Display Inline Block? Are there any issues they tried to solve i didn't mentioned above?
推荐答案
在语义网的术语中,display:inline-block
应该用于放置块级元素,例如<img>
在文本行内.我们不应该使用内联布局来制作页面的主要布局.display: inline-block
的元素也对父元素的 font-size
和 line-height
等属性生效.这会降低页面布局的准确性.在制作页面主布局时,您最好养成使用 float
而不是 inline-block
的习惯.
In the term of semantic web, the display: inline-block
should be used when we want to place a block level element like <img>
within line(s) of text. We shouldn't use inline placement for making the pages main layout. The element with display: inline-block
also takes effect from properties like font-size
and line-height
of parent element. This will decrease the accuracy of page layout.
You would better get in the habit of using float
instead of inline-block
when making the page main layout.
这篇关于为什么 bootstrap 在 .span 上使用浮点数而不是 display: inline-block?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!