html - 并排放置几个宽度为100%的div

Question

我尝试并排放置不同数量的 div。

这个数字是动态的。

但总的来说，这些 div 的宽度应该恰好为 100%(不低于，不超过)。这可能吗？如果可能，我该如何实现？

类似的东西:

 SCREEN SIZE
|<--------------------->|

(2 盒:)

|-----------|-----------|
|           |           |
|-----------|-----------|

或

(三个盒子:)

|-------|-------|-------|
|       |       |       |
|-------|-------|-------|

Answer 1

这个jsFiddle向您展示如何并排放置 3 个盒子。我已经将 css 编辑为:

   .left {
  float:left; 
  width:50%;
  border: 3px solid #333;
  box-sizing: border-box;
  background: #C0C0C0;
  margin: 0;
}

有效(即使在调整大小后)，

html 是:

<div class="left">...B1</div>
<div class="left">...B2</div>

请参阅下面的实际操作:

.left {
  float:left; 
  width:50%;
  border: 3px solid #333;
  box-sizing: border-box;
  background: #C0C0C0;
  margin: 0;
}

    <div class="left">...B1</div>
    <div class="left">...B2</div>