两个或更多 div 宽度 parent 的 100%

Question

我有一个 parent div 可变宽度和高度和自动溢出，然后我有两个或更多 children div 100% 与 parent。我希望所有 children div 具有相同的宽度，但是当 parent 具有水平滚动时，每个 children 具有不同的宽度。看例子：

#container {
  width: 175px;
  background: red;
  overflow: auto;
}

.block {
  height: 20px;
  background: aqua;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid yellow;
  width: 100%;
}

<div id="container">
  <div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="block">bbb</div>
  <div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
  <div class="block">ssss</div>
</div>

Answer 1

解决方法是：

    #container {
      width: 175px;
      background: red;
      overflow: auto;
    }

    .block {
      background: none repeat scroll 0 0 aqua;
      border: 1px solid yellow;
      float: left;
      height: 50px;
      padding: 10px;
      width: 175px;
      word-break: break-all;
    }

<div id="container">
  <div class="block">aaaaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="block">bbb</div>
  <div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
  <div class="block">ssss</div>
</div>

Answer 2

试试这个

#container {
  width: 175px;
  background: red;
  overflow: auto;
  border-collapse:collapse;
}

.table {
  width:100%;
  display:table;
}

.block {
  height: 20px;
  background: aqua;
  display: table-row;
  white-space: nowrap;
  border: 1px solid yellow;
}

<div id="container">
 <div class="table">
  <div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="block">bbb</div>
  <div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
  <div class="block">ssss</div>
 </div>
</div>

请注意，我将 display 更改为 table-row，这会自动删除边框，但为了保留它，我将 border-collapse:collapse; 添加到 #container。

编辑：添加了一个 div 和一个 class "table" + 相关的 CSS

两个或更多 div 宽度 parent 的 100%

Two or more div width 100% of parent

html

css

fluid-layout