Question

假设我想连续排列几个盒子，但如果内容太高，还想添加一个垂直滚动条。（在这个例子中，它始终是。）

下面的代码完成了这项工作：

.row {
  display: inline-block;
  border: 1px solid;
  background: #ffb3ae;
  max-height: 100px;
  overflow-y: scroll;
}
.cell {
  display: inline-block;
  height: 200px;
  margin: 8px 0;
  background: #ffec90;
}

<div class="row">
  <div class="cell">Lorem ipsum</div>
  <div class="cell">dolor sit amet</div>
  <div class="cell">consetetur</div>
  <div class="cell">sadipscing</div>
  <div class="cell">elitr</div>
</div>

我宁愿将overflow-y改为auto。但是，这样做会使滚动条的位置不同，显然会缩小div 。它还使最后一个框不再适合行，导致行分成两行，这对我来说有点问题。（见下文。）

.row {
  display: inline-block;
  border: 1px solid;
  background: #ffb3ae;
  max-height: 100px;
  overflow-y: auto; // this is all I changed
}
.cell {
  display: inline-block;
  height: 200px;
  margin: 8px 0;
  background: #ffec90;
}

<div class="row">
  <div class="cell">Lorem ipsum</div>
  <div class="cell">dolor sit amet</div>
  <div class="cell">consetetur</div>
  <div class="cell">sadipscing</div>
  <div class="cell">elitr</div>
</div>

这里到底发生了什么，为什么？这是在某处记录的预期行为，还是我只是搞砸了什么？
解决此问题的最简单方法是什么（当然，除了将overflow设置为scroll之外）？

Answer 1

我认为white-space:nowrap是 inline-block 行为的默认值，其中overflow:auto违反了此规则。您可以在overflow：auto

之后再次添加white-space:nowrap

.row {
  display: inline-block;
  border: 1px solid;
  background: #ffb3ae;
  max-height: 100px;
  overflow-y: auto;
white-space:nowrap;
}
.cell {
  display: inline-block;
  height: 200px;
  margin: 8px 0;
  background: #ffec90;
}

<div class="row">
  <div class="cell">Lorem ipsum</div>
  <div class="cell">dolor sit amet</div>
  <div class="cell">consetetur</div>
  <div class="cell">sadipscing</div>
  <div class="cell">elitr</div>
</div>

为什么溢出：auto和overflow：滚动条的滚动位置不同？

1 个答案: