Question

我有一个问题，我的页面有动态部分，我可能有1,2,3或4个细分（请看下面的粉红色箭头）。正如你在第一个facebook部分看到的那样，div不会伸展开来。我希望它在三分之一。如果只有2个，那么它应该是一半，并占据容器的整个宽度。

我该怎么做？

HTML：

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

enter image description here

Answer 1

CSS flexbox救援！ Flex很棒，supported by modern browsers。

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

  .channel-units {
    border-right: 1px solid gray;
    margin-right: 10px;
    flex-grow: 1;
  }
}

"use strict";

document.addEventListener("click", function (e) {
  if (e.target.nodeName === "BUTTON") {
    let div = document.createElement("div");
    div.textContent = parseInt(Math.random() * 100, 10);
    
    document.querySelector(".flex").appendChild(div);
  } else if (/\bflex\b/.test(e.target.parentNode.className)) {
    e.target.remove();
  }
});

.flex div {
  text-align: center;
  border: 1px solid black;
  margin: 0;
  flex-grow: 1;
}

.flex {
  border: 1px solid black;
  display: flex;
}

<button>Click to add another div</button>
<p>Click on a box to remove it</p>

<div class="flex">
  <div>12</div>
  <div>34</div>
  <div>56</div>
</div>

Answer 2

我认为CSS表就是答案。

＆＃13;

   .channel-breakdown {
     border-top: 1px solid gray;
     display: table;
     table-layout: fixed;
     width: 100%;
   }
   .channel-units {
     border-right: 1px solid gray;
     display: table-cell;
   }

＆＃13;

CSS + Bootstrap：如何动态拉伸细分宽度以适应容器（带图像）？

2 个答案: