多列等高布局

多列等高布局是在一个容器里面,并排的多列,如果内容的高度无法在一开始确定(例如内容是动态的),又需要让各列自然地撑开(不出现每列里面的滚动条),这时候需要用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,就可以裁剪掉溢出的部分。并且是最高的元素溢出最多,这时候隐藏掉溢出的部分,并行的列就都等高了。

 

转载于:https://www.cnblogs.com/lssthinkingontheway/p/7764435.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值