CSS是網(wǎng)頁(yè)設(shè)計(jì)中的重要元素,可以用來(lái)美化頁(yè)面和布局內(nèi)容。其中,實(shí)現(xiàn)Div等分100是常見(jiàn)的需求,本文將介紹如何通過(guò)CSS實(shí)現(xiàn)這一功能。
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
首先,在HTML中創(chuàng)建一個(gè)父元素(class="parent"),內(nèi)部包含四個(gè)子元素(class="child")。
.parent { display: flex; width: 100%; } .child { flex-basis: 25%; height: 200px; }
然后,在CSS中對(duì)父元素(parent)設(shè)置display:flex,子元素(child)設(shè)置flex-basis:25%。這樣,每個(gè)子元素的寬度就會(huì)平分父元素的100%。同時(shí),指定子元素的高度為200px。
上述代碼實(shí)現(xiàn)了Div等分100的效果,如果需要改變子元素的數(shù)量,只需調(diào)整flex-basis的值即可。