Question

我在包装div class="filter_list"中有一个水平滚动条class="wrapper"。我希望此滚动条始终是包装器div的100％，并且希望该包装器div具有响应性。

如果我的过滤器列表中只有一个项目，则效果很好，但是一旦我放置了超过包装宽度的尺寸，它就不再响应了。

以下是说明问题的图片：

反应灵敏，工作正常：

滚动条阻止了不收缩以适合窗口尺寸的包装纸的宽度（我们可以看到女孩的照片不再是100％方形）：

这是代码：

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 800px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}

.magic_wand {
  margin: 15px 0px 20px;
  max-width: 50px;
}

.ico_magic_wand {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.picture_preview {
  width: 100%;
  margin-bottom: 50px;
  height: 100px;
}

.picture_preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.filter_list {
  width: 100%;
  background-color: blueviolet;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0;
}

.filter:last-child {
  margin-right: 0px;
}

.filter {
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: blue;
  margin-right: 15px;
}

<body>
  <div class="wrapper">
    <div class="magic_wand">
      <img src="img/ico/magic_wand.png" class="ico_magic_wand">
    </div>
    <div class="picture_preview">
      <img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
    </div>

    <div class="filter_list">
      <div class="filter">

      </div>
      <div class="filter">

      </div>
      <div class="filter">

      </div>
      <div class="filter">

      </div>
    </div>

  </div>
</body>

我想了解为什么div class="filter_list"的宽度在缩小窗口宽度的同时不会随其父div缩小，以及如何解决此问题，非常感谢！

Answer 1

尝试使用此代码。.我听不懂您的问题..可能是您的期望，否则请清楚解释。.

css

.filter {
    display: inline-block;
    height: 150px;
    width: 21.3%;
    background-color: blue;
    margin-right: 15px;
}
.filter:nth-child(4n+4) {
  margin-right: 0px;
}

请删除ur css代码并添加此代码。我认为display：flex;是您的代码的问题。

body {
  margin:0px;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}
.magic_wand {
  margin: 15px auto 20px;
  max-width: 50px;
}
.picture_preview {
  width: 100%;
  margin-bottom: 50px;
  height: 100px;
}
.picture_preview img {
  height: 100%;
}
.filter_list {
  width: auto;
  background-color: blueviolet;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0;
}
.filter:last-child {
  margin-right: 0px;
}
.filter {
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: blue;
  margin-right: 15px;
}
@media only screen and (max-width: 1024px) {
  .wrapper {
    width: 100%;
  }
}

如何使水平滚动条适应div宽度？

1 个答案: