css布局之高度问题

在开发过程中会遇到许多等高布局,或者是一些瀑布流布局

下面我们一起看看

等高布局

两列等高

我必须得承认一件事,每次写思路的时候,我总是把神器flex放在最后面,因为我觉得他的兼容性还是有点问题的(兼容情况戳这里
但是,实际上它也是最容易理解的,而且代码量最少的,所以思来想去,我决定第一个推荐这个方法

思路一:flexbox

将父div设定 align-items:stretch;,使得伸缩项目在交叉轴方向拉伸填充整个容器
通俗一点来说,就是子div的高度会和你父div一样高
注意,如果需要右边一侧布满剩下的,直接用flex:1即可
上代码

思路二:float+margin+position

三列等高

思路一:flex

相信到这里大家不用我多说了

思路二:float+position

# css

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×