具有填充 parent 宽度的边距的多个 div
Multiple divs with margin to fill parent width
我尝试制作多个 div 来占据 parent div 的整个宽度。为此,我使用了 display:table
和 display:table-cell
。这种方法的问题是我无法为 child div 添加边距以便在它们之间提供一些 space。现在都叠在一起了,不好看
有什么建议吗?
代码如下:
.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>
您可以通过添加 border
来添加 space :
.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;
border-left:10px solid #fff;
border-right:10px solid #fff;
}
.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
CSS
.parent {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.child {
padding:15px;
background:#f00;
margin-right: 16px;
}
.child:last-child {
margin-right: 0px;
}
.child:nth-child(2n) {
background:green;
}
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
>
不使用显示:table 和 table-cell,使用显示:inline-block;。然后给出你想要的边距。
.parent {
text-align:center;
margin:0px;
width:500px;
padding:0px;
background:blue;
display:inline-block;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
list-style-type:none;
}
.child{
margin:5px;
background:#f00;
display:inline-block;
list-style-type:none;
}
.child:nth-child(2n) {
background:green;
}
我尝试制作多个 div 来占据 parent div 的整个宽度。为此,我使用了 display:table
和 display:table-cell
。这种方法的问题是我无法为 child div 添加边距以便在它们之间提供一些 space。现在都叠在一起了,不好看
有什么建议吗?
代码如下:
.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>
您可以通过添加 border
来添加 space :
.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;
border-left:10px solid #fff;
border-right:10px solid #fff;
}
.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
CSS
.parent {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.child {
padding:15px;
background:#f00;
margin-right: 16px;
}
.child:last-child {
margin-right: 0px;
}
.child:nth-child(2n) {
background:green;
}
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
>
不使用显示:table 和 table-cell,使用显示:inline-block;。然后给出你想要的边距。
.parent {
text-align:center;
margin:0px;
width:500px;
padding:0px;
background:blue;
display:inline-block;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
list-style-type:none;
}
.child{
margin:5px;
background:#f00;
display:inline-block;
list-style-type:none;
}
.child:nth-child(2n) {
background:green;
}