Discussion on the bottom alignment of horizontal list (1, with Inline-block+vertical-align 2, with Table-cell+vetical-align 3, Flex mode)

Source: Internet
Author: User

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

    1. /* Scenario 1:inline-block+vertical-align */
    2. . parent{font-size:0; -webkit-text-size-adjust:none; }/ * eliminates gap issues caused by forcing non-inline-block elements into Inline-block * /
    3. . Child{display:inline-block; vertical-align:baseline;} / * All child elements are set to Inline-block * /

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.