技术频道


CSS inline-block 布局

inline-block 布局


使用 inline-block 布局,有一些事情需要你牢记:

  • vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top
  • 你需要设置每一列的宽度。
  • 如果 HTML 源代码中元素之间有空格或者换行,那么列与列之间会产生空隙

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}
<div id="container">
<section> - 1

当布局很窄时,nav 就会被挤扁。更糟糕的是,你不能在 nav 上使用 min-width 来修复这个问题,因为右边的那列是不会遵守它的

</section>
<section> - 2

只有计算值是可以继承的。所以,即使一个百分比值用于父属性,一个真正的值,比如具体像素宽度 length 的值,将访问继承的属性,而不是百分比的值。

</section>
 

CSS inline-block 布局扩展阅读:




发表评论