Example code for implementing equal height layout in multiple ways with CSS

The equal height layout described in this article uses pure CSS to achieve the effect of equal height of each element without manually setting the height of the element. As shown in the figure:

1. Use table-cell to implement (compatible with IE8)

<style>
    body,div,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .table-layout-container{
        width: 50%;
        margin: 20px auto;
    }
    .table-row-layout{
        /* When the element display is set to table-row, setting the width has no effect, so you need to wrap it with another div and then set its width*/
        display: table-row;
    }
    .table-cell-layout{
        display: table-cell;
        width: 33.33%;
        padding: 10px;
        border: 1px solid #ccc;
        border-left: none;
    }
    .table-cell-layout:first-child{
        border-left: 1px solid #ccc;
    }
</style>

<body>
    <div class="table-layout-container">
        <ul class="table-row-layout">
            <li class="table-cell-layout">
                The development of the industry will inevitably lead to the subdivision of professions, and the same is true in the front-end field. Currently, the front-end of the industry has the following directions: interface display, user experience and accessibility,
                The subsequent js/nodejs development direction, audio/video rich media direction, SVG/canvas/webGL dynamic creative expression and data visualization direction, tool construction document management, internal site construction, and front-end operation direction of conference booking, team building, organization, and external brand publicity.
            </li>
            <li class="table-cell-layout">
                Due to differences in each person's personality traits and growth experiences, the directions that suit them are naturally different. Those who are sensitive and have a design background can focus on user experience, those with a strong logical and engineering mindset are more suitable for back-end development, those who are strong in mathematics and physics can consider data visualization, and those who have strong communication and coordination skills can work towards front-end operations.
            </li>
            <li class="table-cell-layout">
                When I was a student, everyone was very pure. I would study whatever I liked. For example, many girls liked CSS, writing web pages, and creating effects. But when she started looking for a job,
                Things started to change when I came into contact with the real industry circle.
            </li>
        </ul>
    </div>
</body>

2. Use flex layout to achieve

<style>
    body,div,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .flex-layout{
        display: flex;
        width: 50%;

        margin: 20px auto;
    }
    .flex-item{
        width: 33.33%;
        padding: 10px;
        border: 1px solid #ccc;
        border-left: none;
    }
    .flex-item:first-child{
        border-left: 1px solid #ccc;
    }
</style>

<body>
    <ul class="flex-layout">
        <li class="flex-item">
            The development of the industry will inevitably bring about the subdivision of professions, and the same is true in the front-end field. At present, the front-end of the industry has the following directions: interface display user experience and accessibility, back-end js/nodejs development, audio/video rich media, SVG/canvas/webGL dynamic effects creative expression and data visualization, tool construction, document management, internal site construction, front-end operation and maintenance, and conference booking, team building, organization, and external brand promotion.
        </li>
        <li class="flex-item">
            Due to differences in each person's personality traits and growth experiences, the directions that suit them are naturally different. Those who are sensitive and have a design background can focus on user experience, those with a strong logical and engineering mindset are more suitable for back-end development, those who are strong in mathematics and physics can consider data visualization, and those who have strong communication and coordination skills can work towards front-end operations.
        </li>
        <li class="flex-item">
            When I was a student, everyone was very pure. I would study whatever I liked. For example, many girls liked CSS, writing web pages, and creating effects. However, when she started looking for a job and came into contact with the real industry circle, things changed.
        </li>
    </ul>
</body>

3. Use margin to achieve equal height layout (not recommended in actual development)

In addition to using table-cell and flex layout, you can also use negative margin values to achieve the above equal height layout

<style>
    body,div,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .marign-layout{
        width: 50%;
        margin: 20px auto;
        overflow: hidden;
    }
    .item{
        float: left;
        width: 30%;
        padding: 10px;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
        border: 1px solid #ccc;
        border-left: none;
    }
    .item:first-child{
        border-left: 1px solid #ccc;
    }
</style>

<body>
    <ul class="marign-layout">
        <li class="item">
            The development of the industry will inevitably bring about the subdivision of professions, and the same is true in the front-end field. At present, the front-end of the industry has the following directions: interface display user experience and accessibility, back-end js/nodejs development, audio/video rich media, SVG/canvas/webGL dynamic effects creative expression and data visualization, tool construction, document management, internal site construction, front-end operation and maintenance, and conference booking, team building, organization, and external brand promotion.
        </li>
        <li class="item">
            Due to differences in each person's personality traits and growth experiences, the directions that suit them are naturally different. Those who are sensitive and have a design background can focus on user experience, those with a strong logical and engineering mindset are more suitable for back-end development, those who are strong in mathematics and physics can consider data visualization, and those who have strong communication and coordination skills can work towards front-end operations.
        </li>
        <li class="item">
            When I was a student, everyone was very pure. I would study whatever I liked. For example, many girls liked CSS, writing web pages, and creating effects. However, when she started looking for a job and came into contact with the real industry circle, things changed.
        </li>
    </ul>
</body>

There is a disadvantage to using negative margin values, as shown in the figure:

The bottom border is gone because it is cut off by the overflow: hidden; of the parent element.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Why is IE6 used by the most people?

>>: Summary of MySQL character sets