CSS中的塊元素,在默認情況下是獨占一行的。如果希望多個塊元素可以并列展示,可以通過一些方法來實現。
一種比較簡單的方法是使用浮動。將需要并列展示的塊元素設置為浮動,再通過清除浮動的方式,使下一個元素不受上一個元素的影響。
.block{ width: 200px; height: 200px; float: left; margin-right: 20px; } .clearfix:after{ content: ""; display: table; clear: both; }
上面的代碼中,.block是需要并列展示的塊元素,通過設置float: left將其浮動。margin-right則是為了讓不同塊元素之間有一定的間距。
.clearfix是用來清除浮動的,其after偽元素的content屬性用來讓該元素占據一行,并且display: table可以讓該元素和其他元素一樣可以響應事件。
還有一種方法是使用display: inline-block。將需要并列展示的塊元素設置為display: inline-block,直接就可以并列展示。但是需要注意的是,inline-block會產生間隙,可以通過調整父元素的 font-size 為 0 ,再設定所有的子元素為正常大小來解決這個問題。
.parent{ font-size: 0; } .child{ display: inline-block; width: 200px; height: 200px; font-size: 16px; }
上面的代碼中,.parent是父元素,通過設置font-size: 0來解決inline-block的問題。.child是子元素,通過設置display: inline-block來實現塊元素的并列展示。
總之,通過浮動或者inline-block,都能夠實現塊元素的并列展示。但是需要注意的是,這些方法都需要適當調整樣式,以達到最佳的效果。
上一篇css塊圓角
下一篇css塊級元素鋪滿屏幕