欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css实现三列等宽自适应布局(不等高、等高)

程序员文章站 2022-03-21 13:05:54
(一)三列等宽不等高布局html布局:
第一个
第二个
第三个
<...

(一)三列等宽不等高布局

css实现三列等宽自适应布局(不等高、等高)

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

(二)三列等宽等高布局

css实现三列等宽自适应布局(不等高、等高)

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

相关标签: css