（代码示例）css实现等高布局的三种方式

灰太狼 2021-02-01 16:50 604阅读 0赞

*  本篇文章给大家带来的内容是关于css实现等高布局的三种方式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
 *  本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图：
 *  
     
 *  ![format_png][]

##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负值有一个缺点，如图： ##

![format_png][]

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

以上就是css实现等高布局的三种方式（代码示例）的详细内容。

[format_png]: /images/1612198282021.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，604人围观）

还没有评论，来说两句吧...

相关阅读

相关【css】css的三种引入方式

1.行内式  <div style="width: 100px;height: 50px;backgr

约定不等于承诺〃/ 2022年11月26日 08:39/ 0 赞/ 179 阅读

相关 CSS实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% <!DOCTYPE html

àì夳堔傛蜴生んèń/ 2022年09月23日 08:46/ 0 赞/ 128 阅读

相关 CSS四种定位布局方式

什么是定位？一种高级的布局手段，通过定位可以将元素放到任意位置。使用position属性可开启元素的定位，可选值： <table style="width:500

短命女/ 2022年08月29日 09:48/ 0 赞/ 265 阅读

相关 CSS中的三种布局模型

CSS中的三种布局模型为：流动模型（Flow）、浮动模型（Float）、层模型（Layer）一、流动模型流动布局模型具有2个比较典型的特征：

客官°小女子只卖身不卖艺/ 2022年05月27日 04:19/ 0 赞/ 132 阅读

相关 java高并发锁的3种实现示例代码

初级技巧 - 乐观锁乐观锁适合这样的场景：读不会冲突，写会冲突。同时读的频率远大于写。以下面的代码为例，悲观锁的实现： public Object get(O

古城微笑少年丶/ 2022年05月10日 23:22/ 0 赞/ 68 阅读

相关三种方式实现瀑布流布局

分别使用javascript，jquery，css实现瀑布流布局：第一种方式：使用JavaScript： 1 <!DOCTYPE html> 2

超、凢脫俗/ 2022年03月22日 12:59/ 0 赞/ 220 阅读

相关 css 多列等高等宽布局

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

Bertha 。/ 2021年11月17日 22:52/ 0 赞/ 300 阅读

相关 css宽高自适应布局，实现Sticky Footer的三种布局方式

宽度自适应布局： 1、使用场景：一侧（左侧或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于

太过爱你忘了你带给我的痛/ 2021年09月19日 00:50/ 0 赞/ 484 阅读

相关 CSS实现三栏布局(5种)

常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局那么我们就是用以上5种方式完成三栏布局，不过前提是左右

野性酷女/ 2021年08月28日 17:22/ 0 赞/ 350 阅读

相关（代码示例）css实现等高布局的三种方式

- 本篇文章给大家带来的内容是关于css实现等高布局的三种方式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 - 本文讲的等高布局是在不手动...

灰太狼/ 2021年02月01日 16:50/ 0 赞/ 605 阅读