在CSS中,我們可以使用vertical-align: bottom;
屬性來實現div元素向底部對齊。
.container { display: flex; align-items: flex-end; } .box { width: 100px; height: 100px; background-color: #ccc; vertical-align: bottom; }
以上代碼中,container
為包裹box的容器,通過設置display為flex和align-items為flex-end屬性,使box元素在容器底部對齊。
另外,我們也可以使用相對/絕對定位的方式實現div元素向底部對齊。
.container { position: relative; } .box { position: absolute; bottom: 0; width: 100px; height: 100px; background-color: #ccc; }
以上代碼中,container
為包裹box的容器,通過設置position屬性為relative,使box元素可以使用絕對定位來對齊到容器底部,通過設置bottom屬性為0,使box元素在容器底部對齊。
綜上所述,我們可以使用CSS的flex布局和相對/絕對定位兩種方式來實現div元素向底部對齊。
上一篇mysql的知識思維導圖
下一篇css div在最上邊