Question

我目前有一个div，其中包含许多相等大小的内联块对象。当前每行有四个。我想确保如果父div的对象过多，则会出现滚动条。为此，我正在使用overflow-y: auto。一切正常。

问题在于，因为滚动条占用了额外的空间，而不是每行显示四个对象，所以现在每行仅显示三个对象。

如何防止滚动条更改每行的对象数？我可以，如果滚动条与对象有点重叠。

代码段：

在以下代码段中，添加overflow-y: auto会使每一行只有3个对象，而不是4个对象。

.parent {
  background-color: #ddd;
  width: 360px;
  height: 400px;
  overflow-y: auto;


}

.block {
  background-color: #55b;
  width: 65px;
  height: 65px;
  margin: 10px;
  display: inline-block;

}

<div class="parent">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 1

您可以为此使用flexbox。

.parent {
  background-color: #ddd;
  width: 360px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto
}

.block {
  background-color: blue;
  width: 65px;
  height: 65px;
  margin: 10px;
  flex-grow: 1;
}

<div class="parent">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
   <div class="block"></div>
  <div class="block"></div>
</div>

使用溢出Y：自动调整项目的位置

1 个答案: