具有边距的多个div用于填充父宽度

时间:2015-10-30 11:09:03

标签: html css width css-tables

我试图让多个div占据父div的整个宽度。为此,我使用了display:tabledisplay: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>

4 个答案:

答案 0 :(得分:5)

Flexbox让你:):

&#13;
&#13;
  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;}
&#13;
   <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

>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用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;
}

<强> DEMO HERE

答案 2 :(得分:0)

您可以通过添加border

来添加空间

.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>

答案 3 :(得分:0)

而不是使用display:table和table-cell,使用display: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;

}