CSS3提供了多種方法讓我們實現div頂端對齊,比如使用flex
布局、設置position
屬性、或者使用display:inline-block
等等。
其中,使用display:inline-block
是比較經典的方法,我們可以將多個div設置為display:inline-block
,然后通過設置它們的vertical-align:top
屬性來實現頂端對齊。
.container{ font-size:0; /* 去除inline-block元素之間的空格 */ } .item{ display:inline-block; vertical-align:top; width:100px; height:100px; border:1px solid #ccc; }
在上面的代碼中,我們給每個div設置了寬和高,并通過border
屬性給它們加上了邊框,方便查看效果。
接下來,在一個容器元素中放置多個item元素,設置它們的寬度相同,然后就可以實現頂端對齊了。
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
以上就是使用CSS3讓div頂端對齊的方法,它簡單易懂,也能夠實現我們需要的效果,如果你在開發過程中遇到了問題,歡迎在下面留言。