我有一个父div和四个子div。我想在4个子元素中提供相等的空间,右边距为10px,左边距为10px。当我们提供边距时,div会移至第二行,但是我想将div保持等宽的一行并应使用margin。
div {
width:100%;
}
div div {
width: 25%;
margin-left: 10px;
margin-right: 10px;
border: 1px solid #000;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
答案 0 :(得分:3)
在外部div上添加display: flex;
.container {
width: 100%;
display: flex;
}
div div {
width: 25%;
margin-left: 10px;
margin-right: 10px;
border: 1px solid #000;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
没有flexbox的解决方案
.container {
width: 100%;
font-size: 0;
}
div div {
box-sizing: border-box;
width: calc(25% - 20px);
display: inline-block;
margin-left: 10px;
margin-right: 10px;
border: 1px solid #000;
font-size: 16px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>