小编Mde*_*mez的帖子

我试图让多个div占用父div的整个宽度.为了做到这一点,我使用display:table和display:table-cell.这种方法的问题是我不能为子div添加边距以便在它们之间留出一些空间.现在他们都堆叠在一起,看起来不太好.

有什么建议？

这是代码:

HTML

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

CSS

<div class="parent">
<div class="child">sometext</div>
<div class="child">somemoretext</div>
<div class="child">sometext</div>
<div class="child">sometext</div>
</div>

这是一个实时版本:http://codepen.io/mariomez/pen/MaXjqW