水平排列元素(高度不同)的底部對齊方式

2021-08-29 12:10:26 字數 580 閱讀 6172

今天工作中有乙個需求,需要將所有的底部對齊,高度大小不同,就用簡單的div來代替

html如下:

aa

bb

cc

這裡的parent和child高度未知

css方法如下:

一、 absolute + bottom

首先想到的是用absolute定位來做,但這不是乙個好方法原因基於兩點:

.parent 

.child

二、vertical-align + inline-block

指定子元素為內聯塊元素,然後指定他們的垂直對齊方式

.child
vertical-align不同於text-align,是指定自身相對于父元素的垂直對齊方式

這種方式簡單而且只在子元素上設定樣式即可,相容性也非常好

三、flex + align-items

在父元素上設定

.parent

CSS 元素的高度,元素高度自適應螢幕高度

元素的高度預設是auto,被內容自動撐開 100 使得html的height與螢幕的高度相等 50 使得html的height等於螢幕的一半 若想讓乙個的高度與螢幕高度自適應,始終充滿螢幕,需要從html層開始層層新增height 100 元素沒有 margin和padding 元素有margin ...

DIV不確定高度內部元素水平垂直居中的方法歸納

看題目就知道是利用父標籤的 display table cell,該屬性指讓標籤元素以 單元格的形式呈現,類似於td標籤。目前ie8 以及其他現代瀏覽器都是支援此屬性的。那麼既然父標籤已經是類似 單元了,那麼就可以利用 單元的屬性vertical align middle 來使得內部元素垂直居中了,...

元素的水平居中總結

1.行內元素 這個比較簡單,一般使用text align center就可。lang en charset utf 8 documenttitle type text css div1 style id div1 行內居中 div body html 2.塊級元素。lang en charset u...