两个或多个 div 宽度为父级的 100%答案

【问题标题】：Two or more div width 100% of parent两个或多个 div 宽度为父级的 100%
【发布时间】：2015-03-25 23:51:30
【问题描述】：

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

#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>

【问题讨论】：

CSS 无法检测溢出...你需要 javascript。
根据内容计算的inline-block元素的宽度
任何时候你注入某种活力（我不知道这是不是一个词）普通的 CSS 和 HTML 将无法处理它。因此，当您尝试根据某些情况动态调整宽度属性时，您需要 JS
我用JS设置每个孩子的宽度，但是当我改变父div宽度时效果不好

标签： html css fluid-layout

【解决方案1】：

试试这个

#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 类 "table" + 相关 CSS

【讨论】：

那很好...但是如果父级的宽度大于子级的宽度，则子级不是我想要的父级的 100%...尝试将 #container 宽度更改为 375px;在右侧，您将看到背景颜色为红色
要实现这一点，您可能需要添加另一个div 以在“#container”中包含块。我现在就更新sn-p
完成！再次感谢您

【解决方案2】：

解决办法是：

    #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>

【讨论】：

这里不需要设置显示属性，因为如果你设置浮动属性不是none，元素会得到它的显示属性作为块。
如果我理解正确，那么 OP 希望只有在父元素的水平滚动存在时，他的每个子元素才具有可变宽度。还是我完全错过了这个问题？
我不明白他想要用 div 外的溢出内容构建布局：)
我无法回答这个问题。也许OP有一个要求，父母的宽度是动态的并且由其他一些因素设置。因此，如果未检测到溢出但检测到溢出的宽度不同，OP 希望为子项设置相同的宽度
容器是一个可拖动可调整大小的div，它的内容可以有不同的宽度。孩子 div 有一张桌子，所以我不能设置属性 word-break: break-all;