示例链接here。 在我看来,display:inline-block是将
display: inline-block
方法唯一的缺点是在IE7及以下版本中,元素只能以inline
的方式显示为inline-block
。这意味着你必须使用<span>
元素而不是<div>
元素。但实际上这并不是一个很大的缺点,因为从语义上讲,<div>
用于分割页面,而<span>
仅用于覆盖页面的一部分,所以两者之间的语义差异并不大。使用display:inline-block
的一个重要优势是,当其他开发人员在以后维护你的代码时,他们更容易理解display:inline-block
和text-align:right
的目的,而不像float:left
或float:right
语句那样难以理解。我最喜欢inline-block
方法的一个好处是,可以轻松使用vertical-align:middle
、line-height
和text-align:center
来完美地居中元素,这种方法非常直观。我在Mozilla博客上找到了一篇关于如何实现跨浏览器的inline-block的优秀博客文章。这里是浏览器兼容性信息。
浮动
使用float
方法布局页面不太合适的原因是,float
CSS属性最初只用于文字环绕图片(杂志风格),因此在一般的页面布局中并不是最佳选择。当稍后更改浮动元素时,有时会出现定位问题,因为它们不在页面流中。另一个缺点是它通常需要清除浮动,否则可能会破坏页面的某些方面。清除浮动需要在浮动元素后添加一个元素,以防止它们导致其父元素折叠,这跨越了将样式与内容分离的语义线,因此是Web开发中的反模式。
white-space
CSS属性轻松解决。http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015年更新 - 弹性盒子布局是现代浏览器的良好替代方案:
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
2016年12月21日更新
Bootstrap 4将不再支持IE9,因此从行中去除浮动并完全采用Flexbox。
white-space
属性--你能解释一下吗? - antinomeletter-spacing
,它不会被破坏。 - antinome<div>
元素上使用网格系统,会感到不满意,因为如果使用 inline-block 而不是 float,会在旧版本的 IE 中引起问题。所以,基本上是为了兼容旧版浏览器。 - Alex W虽然我同意一般情况下使用inline-block
更好,但如果您使用百分比宽度创建响应式网格(或者您想要像素完美的宽度),则需要考虑到以下问题:
如果您正在使用总宽度为100%或接近100%的网格来使用inline-block
,则需要确保您的HTML标记之间没有空格。
对于浮动,这不是您需要担心的事情-列会漂浮在列之间的任何空格或其他内容上。此问题的答案提供了一些好的提示,可以删除HTML中的空格而不会使代码难看。
如果由于任何原因您无法控制HTML标记(例如,受限制的CMS),则可以尝试此处描述的技巧,或者您可能需要妥协并使用浮动而不是inline-block。 还有一些丑陋的CSS技巧仅在极端情况下使用,例如在列容器上使用font-size:0;
,然后重新应用每个列的字体大小。
例如:
float:left
。它“只是工作”(但需要清除包装器)。inline-block
。块之间的空格创建了一个固定宽度的间距,将总宽度推向超过100%,破坏布局并导致最后一列下移一行。inline-block
属性并且HTML中列之间没有空格的相同网格。它再次“正常工作”,但是HTML更加难看,您的CMS可能会强制进行某种美化或缩进以使其HTML输出更难实现。div+(whitespace) {display:none}
或其他什么方法? - NoBugs<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here...
,那怎么办?) - NoBugs* {padding:0px; margin:0px; }
,因为这有助于平衡我的编码。 - Angry 84有一个关于inline-block的特性可能不是很直观。CSS中vertical-align的默认值是baseline,这可能会导致一些意外的对齐行为。看看这篇文章。
相反,当您使用float:left时,这些div是彼此独立的,您可以轻松使用margin对其进行对齐。
inline
而不是inline-block
的。但是相关问题中的第一个答案很好:https://dev59.com/qWgt5IYBdhLWcg3wywhJ#11823622 - ThinkingStiff