如何解决如何使用float:left属性均匀分布元素
我有一个容器div。 在它里面,我所有的子div都具有float left属性。 如何将孩子div均匀地排在整个行上?
代码笔如下: https://codepen.io/pranavbhagwat81/pen/NWNgaVW
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
CSS
.box{
}
.box1{
height:50px;
width:50px;
background-color:violet;
float:left;
}
.box2{
height:50px;
width:50px;
background-color:indigo;
float:left;
}
.box3{
height:50px;
width:50px;
background-color:green;float:left;
}
解决方法
使用space-between
(或space-evenly
)代替flex:
.box {
display: flex;
justify-content: space-between;
}
.box > * {
height: 50px;
width: 50px;
}
.box1 {
background-color: violet;
}
.box2 {
background-color: indigo;
}
.box3 {
background-color: green;
}
.box4 {
background-color: orange;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: red;
}
.box7 {
background-color: black;
}
.box8 {
background-color: pink;
}
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
<div class='box6'></div>
<div class='box7'></div>
<div class='box8'></div>
</div>
如果您不能使用flex,则可以calc
来确定应留出的边距:
.box > * {
height: 50px;
width: 50px;
float: left;
}
.box > *:not(:first-child) {
margin-left: calc((100vw - 50px * 8) / 8)
}
.box1 {
background-color: violet;
}
.box2 {
background-color: indigo;
}
.box3 {
background-color: green;
}
.box4 {
background-color: orange;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: red;
}
.box7 {
background-color: black;
}
.box8 {
background-color: pink;
}
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
<div class='box6'></div>
<div class='box7'></div>
<div class='box8'></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。