水平滚动中多个元素的绝对对齐 div

Question

我在类似 table 的水平滚动容器中有一个元素列表。每个元素具有相同的宽度，但可能具有不同的高度。我希望每个元素的右上角都有一个按钮，但我不希望该按钮在元素变得太长时滚出视图。

我发现解决了同样的问题，但只针对滚动中的一项 div。它依赖于相对于容器定位按钮，由于元素列表，我无法做到这一点。

我目前的尝试是这样的：

.container {
  width: 400px;
  position: relative;
  overflow-x: auto;
}
.table {
  display: table;
}
.row {
  /* 
  If the row isn't relative, all buttons stick to the
  container top.
  
  However, the buttons are now also out of view 
  due to the overflow.
  */
  position: relative;
  
  /* Just to make the content overflow */
  white-space: nowrap;
  
  /* For a clearer distinction between rows */
  padding: 0.5rem;
  border-bottom: 1px solid black;
}
.button {
  /* The button needs to be in line with the parent row */
  top: 0;
  
  right: 0;
  position: absolute;
}

<div class="container">
  <div class="table">
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">1</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
        <br>
        This one is however a bit taller than the other items.
      </div>
      <button class="button">2</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">3</button>
    </div>
  </div>
</div>

Answer 1

您可以使用 position:sticky

解决此问题

.container {
  width: 400px;
  position: relative;
  overflow-x: auto;
}

.table {
  display: table;
}

.row {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem;
  border-bottom: 1px solid black;
  display:flex;
}

.button {
  right: 0;
  margin-top:-5px;
  position: sticky;
  align-self:flex-start;
  margin-left:auto;
}

<div class="container">
  <div class="table">
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">1</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
        <br> This one is however a bit taller than the other items.
      </div>
      <button class="button">2</button>
    </div>
    <div class="row">
      <div>
        Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
      </div>
      <button class="button">3</button>
    </div>
    <div class="row">
      <div>
        Some content 
      </div>
      <button class="button">4</button>
    </div>
  </div>
</div>

Answer 2

会被position:sticky

解决

水平滚动中多个元素的绝对对齐 div

Absolute alignment of multiple elements in horizontal scrolling div

html

css

css-position