javascript - 您如何处理具有不同高度的布局列？

Question

具体来说，我的问题是我有一个 2 列布局页面，这取决于文章文本的长度，可能会使右侧太不合适，因为例如文章文本在左侧太短，会使右侧太长。

如果左侧比右侧长实际上没问题，否则就不好。

所以我的问题可能是，如果右栏比左栏长很多，当达到最大高度时右栏仍在滚动，您通常会怎么做才能使右栏停止滚动？

Answer 1

您可以使用display: flex 来指定每个文章列应占用的宽度:

.container {
  display: flex;
}

.a1 {
  background: orange;
  flex: 1;
}

.a2 {
  background: red;
  flex: 1;
}

<div class="container">
  <article class="a1">
    <h1>Article 1</h1>
    <p>This is some text for article one, it does not change the size of the article!</p>
  </article>
  <article class="a2">
    <h1>Article 2</h1>
    <p>This is some text for article two, it does not change the size of the article! Yay!!!!</p>
  </article>
</div>