Question

我尝试并排获得各种数量的div。

此号码将是动态的。

但总的来说，这些divs的宽度应该恰好为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>

Answer 2

尝试使用flex模型，就像魅力一样！

 html, body  { height: 100%; width: 100%; }

.eqWrap { display: flex; }

.eq { padding: 10px; }
.eq:nth-of-type(odd) { background: yellow; }
.eq:nth-of-type(even) { background: lightblue; }
.equalHW { flex: 1; }

<div>
  <h1>EQUAL WIDTH COLUMNS</h1>
  <p>Add display:flex to the parent and flex:1 to the boxes</p>
  <div class="equalHWrap eqWrap">
    <div class="equalHW eq">boo <br> boo</div>
    <div class="equalHW eq">shoo</div>
    <div class="equalHW eq">shoo</div>
  </div>
</div>

jsFiddle：http://jsfiddle.net/SchweizerSchoggi/y7L698nq/

将几个div并排放置，宽度为100％

2 个答案: