如何将元素列表对齐？ [英] How to align a list of elements to bottom?

问题描述

我想将容器内的元素列表对齐到底部。默认情况下它会粘贴到容器的顶部。

请注意，此列表需要保持滚动能力。所以我不能使用flex。 Flex使元素调整大小，并避免滚动。

我想不出一个简单的方法来做到这一点。

解决方案

code> transform 在y方向上缩放 - 请参阅下面的演示：

  #list {height：200px;边框：1px纯绿色;溢出-y：auto; transform：scaleY（-1）;}。item {height：30px; line-height：30px; background-color：lightgray; margin：3px 0; transform：scaleY（-1）;}  

< div ID = 列表 > < div class =item> Item0< / div> < div class =item> Item1< / div> < div class =item> Item2< / div> < div class =item> Item3< / div> < div class =item> Item4< / div> < div class =item> Item5< / div> < div class =item> Item6< / div> < div class =item> Item7< / div> < div class =item> Item8< / div> < div class =item> Item9< / div>< / div>

I'd like to align a list of elements inside of a container to bottom. By default it sticks to the top of the container.

Note that this list needs to keep its scroll ability. So I can't use flex. Flex makes elements resize and avoids scroll.

I can't think of an easy way to do this.

JSFiddle

#list {
  height: 200px;
}

.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px 0;
}

<div id="list">
  <div class="item">Item0</div>
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
  <div class="item">Item7</div>
  <div class="item">Item8</div>
  <div class="item">Item9</div>
</div>

解决方案

There is a hack using transform scaling in the y-direction - see demo below:

#list {
  height: 200px;
  border:1px solid green;
  overflow-y: auto;
  transform: scaleY(-1);
}
.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px 0;
  transform: scaleY(-1);
}

<div id="list">
  <div class="item">Item0</div>
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
  <div class="item">Item7</div>
  <div class="item">Item8</div>
  <div class="item">Item9</div>
</div>

这篇关于如何将元素列表对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！