利用html+css快速实现一个多栏布局

利用html+css快速实现一个多栏布局

今天在写前端笔试题的时候发现笔试里总有一个这种实现自适应多栏布局的问题，于是现在记录下如何实现。

以实现一个简单的三栏布局为例，左右两栏为固定宽度，高度占满，中间一栏撑开剩余宽度，高度占满。

<body> 
   <div class="main">
        <div class="div01"></div>
        <div class="div02"></div>
        <div class="div03"></div>
    </div>
</body>

上面先将三栏分为三个div盒子，将他们包裹在一个大的div盒子里。

*{
    margin: 0;
}
body,html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main{
    width: 100%;
    height: 100%;
    display: flex;
}
.div01.div02,.div03{
    display: inline-block;
}
.div01{
    width: 300px;
    height: 100%;
    background-color:red;
}
.div02{
    height: 100%;
    width: 100%;
    background-color: yellow;
}
.div03{
    height: 100%;
    width: 300px;
    background-color: blue;
}

上面为实现的CSS代码，简单讲解下：

（1）首先因为需要拉满高度，共分宽度，所以他们的父元素需要达到满宽度和满高度，即100%。但是百分比高度是根据父元素的宽高决定的，所以必须先设置body和html元素百分百高度宽度，

这样作为他们的子元素的div上的百分比高度宽度才会生效。（如果父元素没有定义高度宽度，则子元素的百分比高度宽度是不会生效的）。

同时建议顺便设置下溢出隐藏，怕万一给撑出去了就巨难看了，淦！

（2）其次三栏是共分宽度的情况，所以我们需要给包裹着他们的父元素设置为弹性盒子flex。

（3）其他就好办了，该拉满高度的拉满百分百，该分多少固定宽度的分多少，撑开剩余宽度的直接百分百拉满就行。但需要注意给每栏的div都设置为行内块元素，不然div是块元素会自己独占一行。

效果大概就是这样：

 

posted @ 2020-09-01 22:07  deepCream  阅读(334)  评论(0)    收藏  举报