css布局：多列等高布局

Ethan815 发布于2019-08-29 15:05 / 1802人阅读

摘要：多列等高布局是在一个容器里面，并排的多列，如果内容的高度无法在一开始确定例如内容是动态的，又需要让各列自然地撑开不出现每列里面的滚动条，这时候需要用或者的方法把各列高度设置为最高列的高度。

多列等高布局是在一个容器里面，并排的多列，如果内容的高度无法在一开始确定（例如内容是动态的），又需要让各列自然地撑开（不出现每列里面的滚动条），这时候需要用css或者js的方法把各列高度设置为最高列的高度。这里我们介绍纯css实现方法。

程序代码：


　　
　　　　
　　　　Trend
　　      The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry.
　　
　　
　　　　
　　　　User
　　　　User namespaces are now fully implemented as of document is obsolete.
　　
　　
　　　　
　　　　Picture
　　　　Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes..

这时候用浮动布局让三个col并列：

.col {
　　float: left;
　　width: 33.33%;
　　padding: 20px;
　　color: #fff;
　　text-align: center;
　　background: #2980b9;
}

可以看到出现这样三列：因为内容区域的大小不同导致高度不同。如果内容区域是动态的，我们也不能够直接把高度都设置成最高的那列。

这时候，我们给col增加样式：

padding-bottom: 500px;

出现的效果是：红色代表父元素，蓝色代表子元素原来的内容，也就是父元素和子元素都因为padding被撑开了。

这时，再给col增加样式
margin-bottom: -500px;

这时候，相当于三个子元素都超出父元素边界500px，也就是父元素的border-bottom往上移动500px，刚好到了最长元素的内容区域。

这时候再给父元素设置overflow:hidden就可以把黄色下面的区域隐藏掉，实现三列等高布局。

多列等高布局的一个解决思路就是：先给几个子元素设置一个比较大的padding-bottom和一个等值的负数margin-bottom，也就是相当于在父元素溢出了，这时候再从父元素那里设置overflow:hidden，就可以裁剪掉溢出的部分。并且是最高的元素溢出最多，这时候隐藏掉溢出的部分，并行的列就都等高了。

专线服务云服务器 css布局 css布局教程学习css布局 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113086.html

css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

kun_jian 2019-08-01 15:45 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

lei___ 2019-08-02 15:33 评论0 收藏0
前端面试重点之——多列布局

摘要：重点以需求为例说明。三左边不定宽，右边自适应布局需求左侧不定宽，右侧自适应，间距。五等宽布局解决方案需求多列等宽，并保留间距。在页面开发中，当我们拿到设计师给出的UI图后，首先考虑的就是布局问题，而多列布局会是我们碰到最多的布局问题，个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局，三列布局，多列布局，其中布局方法中的原理都有类似之处。目录一、定宽+...

superPershing 2019-08-23 18:40 评论0 收藏0