css实现三列等宽自适应布局(不等高、等高)
程序员文章站
2022-03-21 13:05:54
(一)三列等宽不等高布局html布局:
第一个
第二个
第三个
<...(一)三列等宽不等高布局
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
上一篇: 为什么要吃时令蔬菜?遵循规律
下一篇: 福建人都煲什么汤好呢?感觉那的汤超鲜