色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css塊平行顯示

錢多多2年前12瀏覽0評論

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,都能夠實現塊元素的并列展示。但是需要注意的是,這些方法都需要適當調整樣式,以達到最佳的效果。