我试图让多个 div 占据父 div 的整个宽度。为此,我使用了 display:table
和 display:table-cell
。这种方法的问题是我无法为子 div 添加边距以便在它们之间留出一些空间。现在他们都堆在一起,看起来不太好。
有什么建议吗?
代码如下:
.parent {
text-align:center;
margin:0px;
width:500px;
padding:0px;
background:blue;
display:table;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
list-style-type:none;
}
.child{
padding:15px;
background:#f00;
display:table-cell;
list-style-type:none;
}
.child:nth-child(2n) {background:green;}
<div class="parent">
<div class="child">sometext</div>
<div class="child">somemoretext</div>
<div class="child">sometext</div>
<div class="child">sometext</div>
</div>
最佳答案
Flexbox 让你 :) :
Body {background:cyan;}
.parent {
text-align:center;
margin:0px;
width:100%;
padding:0px;
background:blue;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
}
.child{
padding:15px 25px;
background:#f00;
list-style-type:none;
width:inherit;
margin:5px;
}
.child:nth-child(2n) {background:green;}
<div class="parent">
<div class="child">sometext</div>
<div class="child">somemoretext</div>
<div class="child">sometext</div>
<div class="child">sometext</div>
</div>
<div class="parent">
<div class="child">somemoretext</div>
<div class="child">sometext</div>
</div>
<div class="parent">
<div class="child">somemoretext</div>
<div class="child">somemoretext</div>
<div class="child">sometext</div>
</div
>
关于html - 多个带有边距以填充父级宽度的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33434587/