There are a number of ways to implement the bottom alignment of a horizontal list:
1, with Inline-block+vertical-align
2, with Table-cell+vetical-align
3, using the Flex method
In addition, deformation and absolute positioning can be used, but it is too complex to use deformation and absolute positioning methods.
Here are just the first three ways, the only difference between the first two is that the second one uses Display:table-cell.
HTML code section:
<Body> <Divclass= "Parent"> <DivID= "Child1"class= "Child">1</Div> <DivID= "Child2"class= "Child">2</Div> <DivID= "Child3"class= "Child">3</Div> <DivID= "Child4"class= "Child">4</Div> </Div></Body>
Common CSS sections for each scenario:
/*Setting the simulation height*/. Parent{width:600px;Height:400px;}. Parent{Border:5px Dashed Red;/*set borders for easy viewing*/}#child1{width:25%;Height:80%;Background-color:#0D6798;}#child2{width:25%;Height:60%;Background-color:#98050C;}#child3{width:25%;Height:40%;Background-color:#149818;}#child4{width:25%;Height:20%;Background-color:#169999;}
1th Type: Inline-block + vertical-align
Note that the Vertical-align property above is acting on a child element, not on the parent element. Because the inline elements are arranged horizontally, the parent element can only set their alignment in the horizontal direction.
You will notice that although the child elements are aligned, there is no bottom alignment relative to the parent element. This can be solved by the following Table-cell scheme.
2nd type: Table-cell + vetical-align
/*Solution 2:table-cell*/. Parent{font-size:0;-webkit-text-size-adjust:None; }/*eliminates gap issues caused by forcing non-inline-block elements into Inline-block*/. Parent{Display:Table-cell;vertical-align:Bottom;}/*The biggest benefit of adding Table-cell is that you can set the child elements to be arranged vertically on the parent element .*/. Child{Display:Inline-block;vertical-align:Bottom;}
The biggest difference between this example and the previous example is the addition of the Display:table-cell property, which, after adding this property, is like a cell in a table, and it is natural to use the Vertical-align property on the parent element to align the elements vertically. The vertical-bottom on the parent element is the alignment of the child element to the parent element as a whole, and the vertical-align on the child element. This also solves the flaw in the first scenario:
3rd Type: Flex
/**/. Parent{display: flex; align-items: flex-end ;}The Align-items property indicates that the secondary axis is aligned from bottom to top.
This article reprinted from: NetEase Front-end micro-professional discussion area, Chen Yurong Writing, I made a modification and perfect
Discussion on the bottom alignment of horizontal list (1, with Inline-block+vertical-align 2, with Table-cell+vetical-align 3, Flex mode)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
