CSS实现三列等高布局有几种方式，哪种较好？

发布时间：2023-08-19 14:22:27 所属栏目：语言来源：

导读：这篇文章给大家分享的是用CSS如何实现三列等高布局。等高布局是在不手动设置元素高度的情况下，各个元素高度都相当的效果。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以

这篇文章给大家分享的是用CSS如何实现三列等高布局。等高布局是在不手动设置元素高度的情况下，各个元素高度都相当的效果。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    1、使用table-cell实现(兼容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{

        /* 当元素display设置为table-row后，再设置宽度就没有效果了，因此需要再包裹一层div，然后给它设置宽度 */

        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">

                行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、

                后的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设

                文档管理内部站建设的前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。

            </li>

            <li class="table-cell-layout">

                由于每个人的性格特质，成长经历的差异，自然适合的方向也不一样。感性细腻有设计背景可以专注于用户体验，纯逻辑工程

                化思维浓郁则更适合偏后开发，数学物理强悍可以考虑数据可视化方向，沟通协调能力很强可以朝着前端运营方向努力。

            </li>

            <li class="table-cell-layout">

                在学生时代，大家都很纯粹，我喜欢这个就学这个，例如，很多女生很喜欢CSS，写页面，做效果。但是，等她开始找工作，

                还是接触真实的行业圈子的时候，事情就发生了变化。

            </li>

        </ul>

    </div>

</body>

    2、使用flex布局实现

<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">

            行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、偏后

的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的

前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。

        </li>

        <li class="flex-item">

            由于每个人的性格特质，成长经历的差异，自然适合的方向也不一样。感性细腻有设计背景可以专注于用户体验，纯逻辑工程化思

维浓郁则更适合偏后开发，数学物理强悍可以考虑数据可视化方向，沟通协调能力很强可以朝着前端运营方向努力。

        </li>

        <li class="flex-item">

            在学生时代，大家都很纯粹，我喜欢这个就学这个，例如，很多女生很喜欢CSS，写页面，做效果。但是，等她开始找工作，还是接

触真实的行业圈子的时候，事情就发生了变化。

        </li>

    </ul>

</body>

    3、利用margin实现等高布局(实际开发中不建议使用)

    实现上面的等高布局除了可以使用table-cell、flex布局外还可以利用margin负值来实现

<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">

            行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、偏后

的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的

前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。

        </li>

        <li class="item">

            由于每个人的性格特质，成长经历的差异，自然适合的方向也不一样。感性细腻有设计背景可以专注于用户体验，纯逻辑工程化思

维浓郁则更适合偏后开发，数学物理强悍可以考虑数据可视化方向，沟通协调能力很强可以朝着前端运营方向努力。

        </li>

        <li class="item">

            在学生时代，大家都很纯粹，我喜欢这个就学这个，例如，很多女生很喜欢CSS，写页面，做效果。但是，等她开始找工作，还是接

触真实的行业圈子的时候，事情就发生了变化。

        </li>

    </ul>

</body>

    使用margin负值有一个缺点，

    底部边框不见了，因为被父元素的overflow: hidden;切割掉了。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!