当前位置： 移动技术网 > IT编程>网页制作>HTML > css实现三列等宽自适应布局（不等高、等高）

css实现三列等宽自适应布局（不等高、等高）

2020年07月24日  | 移动技术网IT编程  | 我要评论

（一）三列等宽不等高布局

html布局：

<div class="container">
    <div class="box left">
        第一个
    </div>    
    <div class="box center">
        第二个
    </div>
    <div class="box right">
        第三个
    </div>    
</div>

方法一：瀑布流布局： multi-columns 布局

第①种：

.left{
    height: 160px;
    background: blue;
}   
.center{
    height: 285px;
    background:red;
}
.right{
    height: 80px;
    background:pink;
}
.container {
    -moz-column-count:3;	
    -webkit-column-count:3;  /* Firefox */
    column-count:3; /* Safari 和 Chrome */
    -moz-column-gap:1em;
    -webkit-column-gap:1em;
    column-gap:1em;
}
.box {
    padding:1em;
    -moz-page-break-inside:avoid;
    -webkit-column-break-inside:avoid;
    break-inside:avoid;
}

第②种：

.left{
    height: 160px;
    background: blue;
}   
.center{
    height: 285px;
    background:red;
}
.right{
    height: 80px;
    background:pink;
}
.container {
    column-count: 3; /*css3新增，把contaner容器中的内容分为三列*/
    column-gap: 20px; /*定义列之间的间隙为20px*/
}
.box {
    font-size: 40px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    counter-increment: item-counter;
}

方法二：Flexbox布局

.left{
    height: 160px;
    background: blue;
}   
.center{
    height: 285px;
    background:red;
}
.right{
    height: 80px;
    background:pink;
}
.container {
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}
.box {
    font-size: 40px;
    width: calc((100% - 40px)/3);  /* 40px是这三个元素之间的间距 */
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

参考：https://blog.csdn.net/Artful_Dodger/article/details/79761760

（二）三列等宽等高布局

html布局：

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

方法一：flex 布局

第①种：父容器设置 display:flex； 子元素设置 flex:1

.container{
    display:flex;
    width:100%;
    height:200px;
    background: green;
}
.left{
    width:30%;
    margin:0 2.5% 0 0;
    height:100%;
    background-color:blue;
}
.center{
    width:30%;
    margin:0 5% 0 2.5%;
    height:100%;
    background-color:red;
}
.right{
    flex:1;
    background-color:yellow;
}

第②种：父容器使用 display:flex;  justify-content:space-between；子元素设置为 30%

.container{
    height:300px;
    display:flex;    
    justify-content:space-between;	
}
.left{
    background-color:pink;
    width:30%;
}
.center{
    background-color:black;
    width:30%;
}
.right{
    background-color:red;
    width:30%;
}

方法二：绝对布局

.container{
    width:100%;
    height:200px;
    background: green;
    position:relative;
}
.left{
    width:30%;
    position:absolute;
    left:0;
    top:0;
    background-color:red;
    height:100%;
}
.center{
    width:30%;
    margin-left:35%;
    background-color:blue;
    height:100%;
    position:absolute;
}
.right{
    width:30%;
    margin-left:70%;
    background-color:yellow;
    height:100%;
}

方法三：使用浮动

.container{
    width:100%;
    height:200px;
}
.left{
    float:left;
    width:30%;
    margin:0 2.5% 0 0;
    background-color:blue;
    height:100%;
}
.center{
    float:left;
    width:30%;
    margin-left:2.5%;
    margin-right:5%;
    background-color:red;
    height:100%;
}
.right{
    overflow:hidden;
    background-color:pink;
    height:100%;
}

参考：https://blog.csdn.net/fufang0303/article/details/106409364/

 

本文地址：https://blog.csdn.net/Windyluna/article/details/107524633

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网