孩子不占用父容器的整个宽度

Question

内部子项不占用父容器的整个宽度。

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小提琴链接是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?

Answer 2

我认为它与clearfix内容属性有关。

这是一个通用的clearfix hack

/* slightly enhanced, universal clearfix hack */
.cf:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.cf { display: inline-block; }
/* start commented backslash hack \*/
* html .cf { height: 1%; }
.cf { display: block; }
/* close commented backslash hack */

还尝试将子值的子宽度更改为30.1％