css布局：多列等高布局

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

程序代码：

<div id="container"><div class="col"><img src="trend.png"><h1>Trend</h1><p>The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry.</p></div><div class="col"><img src="user.png"><h1>User</h1><p>User namespaces are now fully implemented as of document is obsolete.</p></div><div class="col"><img src="picture.png"><h1>Picture</h1><p>Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes..</p></div></div>

这时候用浮动布局让三个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的三列等高布局
以前自己都是用JS去处理,原来用CSS也是很方便的,可以少写代码^_^ <html xmlns="http://www.w3.org/1999/xhtml"><h ...
html设置多列布局间隙,css设置多列等高布局的方法示例
1.真实等高布局 flex技术点:弹性盒子布局flex,默认值就是自带等高布局的特点. 定义flex布局的时候,有一些默认值. flex-direction属性定义主轴的方向.默认值为row,一般是水 ...
CSS布局——多列等高布局
先看一个案例: 左边是导航部分,右边是详细内容,两者的高度都是不固定的.左边导航栏的内容可能比右边的内容高,反之亦然.但是两者的背景颜色高度始终保持一致! 下面进入正题: 1.利用border实现 & ...
css实用技巧：巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
实现两（三）列等高布局的方法
第一种方法: <style type="text/css"> *{margin: 0; padding: 0;} #wrap{ padd ...
布局：多列等高布局方法
多列等高布局在实际应用中比较常见,作为面试的一个点也常遇到.做个总结. 首先想到的第一种就是 flex 和 min-height , 后朋友提醒,去掉 min-height 试试.由于align-it ...
任意列+左右两列等高布局，并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
[html] 列举几种多列等高布局的方法
[html] 列举几种多列等高布局的方法 1, 使用table布局 `.row { display: table; }.row > * { display: table-cell; }2, 使用 ...
[css] 你知道的等高布局有多少种？写出来
[css] 你知道的等高布局有多少种?写出来 flex拉伸display: flex; align-items: stretch;padding margin抵消然后background-clip默 ...

css布局：多列等高布局

css布局：多列等高布局相关推荐

最新文章

热门文章