Question

我有一个可变宽度和高度的父div和溢出auto，然后我有两个或更多的子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>

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

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改：添加了div个"table" +相关CSS

两个或多个div宽度100％的父级

2 个答案: