html - child 不占据父容器的整个宽度

Question

内部的 child 没有占据父容器的整个宽度。

HTML 是:

  <div class="parent_cntr">
<div class="sub_parent_cntr cf">
    <div class="child_cntr">
        <span>COL 1</span>
    </div>
    <div class="child_cntr">
        <span>COL 2</span>
    </div>
    <div class="child_cntr">
        <span>COL 3</span>
    </div>
</div>
<div class="sub_parent_cntr cf">
    <div class="child_cntr">
        <span>COL 1</span>
    </div>
    <!-- <div class="child_cntr">
        <span>COL 2</span>
    </div>
    <div class="child_cntr">
        <span>COL 3</span>
    </div> -->
</div>
<div class="sub_parent_cntr cf">
    <div class="child_cntr">
        <span>COL 1</span>
    </div>
    <div class="child_cntr">
        <span>COL 2</span>
    </div>
    <div class="child_cntr">
        <span>COL 3</span>
    </div>
</div>

CSS:

   .parent_cntr{width: 100%; border: 1px solid;}
   .sub_parent_cntr{border: 1px solid;}
   .child_cntr{padding: 10px 1.5%; border: 1px solid red; float:left; width :30%}
    .cf:before,
    .cf:after {
        content: " "; /* 1 */
        display: table; /* 2 */
     }

     .cf:after {
        clear: both;
      }

js fiddle 链接是 http://jsfiddle.net/K7gC5/2/我无法得到这个空间的原因，您可以在屏幕截图中看到。

如有任何帮助，我们将不胜感激

Answer 1

我想这和这行 CSS 有关系:

.child_cntr{
    padding: 10px 1.5%;
    border: 1px solid red;
    float: left;
    width :30%
}

您使用 30% 的宽度，这意味着 3 个元素只占 90%。剩下的 10% 是空白。此外，填充和 1px 边框会为您的情况增加额外的宽度。

不幸的是，由于时间不够，我现在无法提供修复。我会尽快回复您。

更新

看看这个:它可能对你有帮助:How can multiple (dynamically sized) divs share 100% width?