在網(wǎng)頁開發(fā)中,通常需要將多個div元素依次豎向排列。這可以通過CSS中的display屬性和flex布局來實現(xiàn)。
/*為父元素設(shè)置Display和flex屬性*/ .parent{ display: flex; flex-direction: column; } /*設(shè)置子元素樣式*/ .child{ /*設(shè)置子元素高度和寬度*/ height: 100px; width: 100%; /*設(shè)置子元素間距*/ margin-bottom: 10px; }
需要注意的是,將父元素設(shè)置為flex布局后,其中的子元素會自動變?yōu)樯炜s項,可以通過設(shè)置伸縮屬性實現(xiàn)各種布局效果。
以上代碼實現(xiàn)了父元素的縱向布局,每個子元素高度為100px, 寬度為父元素的100%并且子元素之間有10px的間距。通過增加或減少子元素的數(shù)量,就可以實現(xiàn)不同數(shù)量子元素的豎向排列。