使用 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%; }
当布局很窄时,nav
就会被挤扁。更糟糕的是,你不能在 nav
上使用 min-width
来修复这个问题,因为右边的那列是不会遵守它的。
只有计算值是可以继承的。所以,即使一个百分比值用于父属性,一个真正的值,比如具体像素宽度 length
的值,将访问继承的属性,而不是百分比的值。