我试图使多个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
>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句