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>

如何处理高度不同的布局列？

1 个答案: