负margin与多列等高布局
以前用负margin与padding实现过一个未知高度的多列等高布局,可是一直不太清楚原理,今天搞清楚了,来稍稍总结一下。
首先是我们最后要实现的效果:
高度不固定,每一段的文字内容都是可变的,三个子块的高度会自动以最大的子块高度为标准。
那么我们来看一下它是怎么实现的
html:
<div class="container"> <div class="item"> <p >每个人对旅行的定义都不同,……(文字省略一部分,下同),为自己成长助益</p> </div> <div class="item"> <p>很多人追问旅行的意义,但有时候过于追求意义岂不太过无趣,且听且看且珍惜,便也不虚此行了</p> </div> <div class="item"> <p>美景不仅仅是目的地,……滴滴</p> </div> </div>
css :
.container { background: lightblue; overflow: hidden; } .item{ width:300px; float:left; margin:0 20px -100px 0; padding-bottom:100px; color: #fff; background: green; }
此处为了演示方便,才将padding值和margin值设置的很小,实际要设置大一点,比如5000px,什么的
这里css的思路主要是三步:
1、将每个子块的padding-bottom设置成一个很大的值
2、将每个子块的margin-bottom设置成和padding-bottom相等(其实也不一定,但最好设置成相等)
3、.container用overflow:hidden;进行裁剪
第一步就不用演示了,我们直接来看第二步:
第二步会减少css自身可读取宽度。什么意思呢?
还是贴张图片出来(线是自己随便画的~)
可以看到这里用margin-bottom并不会改变他们实际渲染出来的高度,但是他们的可读取高度是按照黑线为准线的。那么什么叫可读取高度呢?
这就涉及到第三步,.container 设置overflow:hidden时会把黑线所在的位置当做元素的高度,而黑线以下的会被它当做多余的部分给隐藏掉,再放张图:
自然.container 就会以最大的那个高度为标准去裁剪。
这里也可以看出我们为什么说padding和margin要设置的大一点,你看,第二个子块的底边差点就没有到这条长黑线了,你也可以去把padding值再改小一点看看。此处就不演示了。
如果还是不太明白可读取高度的意思,可以去试试网上的一个简单的例子:
随便写两个div,然后把上面div的margin-bottom:-20px,会发现下面那个div上移了,覆盖了上面的div。这就是因为上面div的可读取高度减小了。此处也不演示了。
至此,用负margin实现多列未知高度的等高布局就暂时小结完毕了。
若有错漏,烦请在评论区指出。