之前这种布局都是百分比,包括间隙,直接问题是屏幕大的时候 间隙太大,而需求是中间间隙不变,盒子随着屏幕变大变小,所以总结了一下,以后用的时候直接套就可以~
先贴结构:
<div class="father">
<div class="box1">
<div>
</div>
</div>
<div class="box2">
<div></div>
</div>
<div class="box3">
<div></div>
</div>
</div>
再贴css:
.father{
width:80%;
height:500px;
border: 1px solid #000;
margin:100px auto;
}
.father > div{
width:33.33333%;
height:500px;
float: left;
box-sizing: border-box;
}
.box1{
padding-right:6.66666px;
}
.box3{
padding-left:6.66666px;
}
.box2{
padding:0 3.33333px;
}
.father > div > div{
width:100%;
height:500px;
background-color: red;
}
运行结果:
间隙是父盒子的padding挤出来的,父盒子的width=33.33333%-padding的值
设box1的padding为x box2的padding为y
则有:
2y=x;x+y=20;(这里的20就是box1与box2之间的间隙)
如果你想要盒子之间的间隙是20px;
.box1{
padding-right:40/3
}
.box3{
padding-left:40/3
}
.box2{
padding:0 20/3
}
以上就实现了中间间隙固定 盒子自适应的布局,ie兼容到ie8
还有一种写法,兼容到ie10的
布局:
<div class="father">
<div></div>
<div></div>
<div></div>
</div>
css:
.father{
width:80%;
height:500px;
border: 1px solid #000;
margin:100px auto;
display:-webkit-box;
display:box;
display:flex;
padding-left:10px;
box-sizing: border-box;
}
.father > div{
flex: 1;
-webkit-box-flex:1;
margin-right:10px;
}
.father > div:nth-child(1){
background-color: red;
}
.father > div:nth-child(2){
background-color: green;
}
.father > div:nth-child(3){
background-color: blue;
}
运行效果:
因为dispaly:flex兼容到ie10所以目前电脑端不采用 手机端可以用
四列的情况:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
.wrap{
display: flex;
height: 400px;
}
.wrap div{
background: blue;
flex: 1;
}
.wrap div+div{
margin-left: 10px;
}
</style>
</head>
<body>
<meta charset="UTF-8">
<title>四列等框</title>
<div class="wrap">
<div>DIV1</div>
<div>DIV2</div>
<div>DIV3</div>
<div>DIV4</div>
</div>
</body>
</html>
因为dispaly:flex兼容到ie10所以目前电脑端不采用 手机端可以用
电脑端的写法:
css:
.father{width: 80%;margin: 100px auto;overflow: hidden;}
.father .son{width: 25%;height: 100px;float: left;box-sizing:border-box;margin-bottom: 20px;}
.father .son>div{background: red;width: 100%;height: 100%;}
.father .son:nth-child(1),.father .son:nth-child(4n+1){padding-right: 15px;}
.father .son:nth-child(2),.father .son:nth-child(4n+2){
padding-right: 10px;
padding-left: 5px;
}
.father .son:nth-child(3),.father .son:nth-child(4n+3){
padding-right: 5px;
padding-left: 10px;
}
.father .son:nth-child(4),.father .son:nth-child(4n+4){
padding-left: 15px;
}
html:
<div class="father">
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
<div class="son">
<div></div>
</div>
</div>
结果:
以上就是流式布局的总结,希望自己写出来也能帮助同行人。记得如果觉得我写的好的话,给我点赞哦