我有一个问题，我的页面有一个动态的部分，我可能有1，2，3或4个subdivs（看下面的粉红色箭头）。正如你可以看到在第一个facebook部分，divs不伸展。我希望它是三分之一。如果只有2个，那么它应该是一半，并占用整个容器的宽度。
我该怎么做？
超文本：

<div class="channel-box">
  <div class="facebook-engagements">
    <img src='blah.img' title="Facebook" />
    <span class="small-stats-font">123</span>
  </div>
  <div class="channel-breakdown clearfix row-fluid">
    <div class="channel-units">
      <img src='blah.img' title="Post" />
      <span class="smaller-stats-font">123</span>
    </div>
    <div class="channel-units">
      <img src='blah.img' title="Like" />
      <span class="smaller-stats-font">123</span>
    </div>
    <div class="channel-units">
      <img src='blah.img' title="Share" />
      <span class="smaller-stats-font">
        123
      </span>
    </div>
  </div>
</div>

CSS：

.channel-breakdown {
        border-top: 1px solid gray;

        .channel-units {
          border-right: 1px solid gray;
          display: inline-block;
          float: left;
          margin-right: 10px;
          width: 23%;
        }
      }

型