Question

我有一个基本的2列布局：一个用于图像，一个用于文本。由于文本列可能会变得很长，因此我希望图像可以滚动。使用position: sticky;可以很容易地实现这一点，但是最后有第三个容器跨越了两列。由于所有三个元素都在同一网格中，因此带有position: sticky;的图像与第三个容器重叠。

是否可以在不使用JS或不添加其他容器的情况下将图像限制在第一网格行？

示例：https://jsfiddle.net/y27unz9L/ .element-1是我要限制在第一网格行中的那个。

<div class="grid-container">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  align-items: start;
}

.element-1 {
  min-height: 10vh;
  grid-row: 1;
  grid-column: 1 / 2;
  position: sticky;
  top: 1em;
  background: red;
}

.element-2 {
  min-height: 100vh;
  grid-row: 1;
  grid-column: 2 / 3;
  background: blue;
}

.element-3 {
  min-height: 100vh;
  grid-row: 2;
  grid-column: 1 / 3;
  background: yellow;
}

Answer 1

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  align-items: start;
}

.element-1 {
  min-height: 10vh;
  grid-row: 1;
  grid-column: 1 / 2;
  position: sticky;
  top: 1em;
  background: red;
}

.element-2 {
  min-height: 100vh;
  grid-row: 1;
  grid-column: 2 / 3;
  background: blue;
}

.element-3 {
  min-height: 100vh;
  grid-row: 2;
  grid-column: 1 / 3;
  background: yellow;
  position: sticky;
}

<div class="grid-container">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

Answer 2

嗯，我将让element-1作为单元格并在其中粘贴一些东西。像这样https://jsfiddle.net/7pcr8fvz/。

@Celery.task
def refresh_auth_tokens():
    users = CustomUser.objects.all()
    for user in users:
        last_refresh_delta = datetime.now(timezone.utc) - user.last_token_refresh
        if last_refresh_delta.days >= 9:
            refresh_user_token(user)
            return True
        else:
            return False

使<div class="element-1"> <div class='sticky'> </div> </div> .element-1 { grid-row: 1; grid-column: 1 / 2; align-self: stretch; //so it's 100% of the available height } .element-1 .sticky { position: sticky; //make this element sticky top: 1em; background: red; height: 10vh; }粘滞的问题是它相对于网格，如果您使一个孩子粘滞，则该孩子相对于.element-1会定位。

是否有可能将位置粘性行为限制在特定的网格行中？

2 个答案: