Question

我试图横向并排获得三个div。我希望最左边的div滚动，因此当用户滚动时，渐变显示出来。出于某种原因，div不是相邻的，左边的不是滚动的，我不知道为什么。

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}

.overall {
  height: 100%;
}

.scroll {
  width: 10%;
  height: 200%;
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: scroll;
}

.one {
  width: 70%;
  height: 100%;
  background: lightgreen;
}

.two {
  width: 20%;
  height: 100%;
  background: lightblue;
}

＆＃13;

<div class="overall">
  <div class="scroll"></div>
  <div class="one"></div>
  <div class="two"></div>
</div>

＆＃13;

Answer 1

它们未被水平放置，因为div 块级元素是默认，这意味着它们占据屏幕的整个行 / 宽度。

现在通常情况下，如果需要将它们水平放置，他/她会使用父元素上的 Flexbox 或display: flex进行设置。当然还有其他方法可以做到。

对于滚动，它不会滚动因为滚动没有任何内容。在{{1}内放置一些＆＃34; tall＆＃34; 足够的内容（大于height的{{1}}集） } 200%并在＆＃34; action＆＃34; 中看到它：

＆＃13;

.scroll

＆＃13;

div

＆＃13;

如何让div垂直滚动并显示渐变

1 个答案: