如何在不使用任何类型的 "absolute" 定位的情况下将 2 个或更多 "row" div 对齐到 div 的底部？需要IE9+支持

Question

我需要将几行 div 行放置到容器底部，类似于此处的图像：

我的问题在于，SO 上的几乎所有解决方案都需要绝对定位或某种方法，每次添加新元素时都需要修改。我尝试使用 display:table-cell 和 vertical-align:middle，但这破坏了我的行布局（所有行都有 display:block;）。有没有办法以我可以继续向布局添加 html 行的方式完成此操作，并且它会从底部增长到顶部而不修改 CSS?

编辑：答案需要在添加新行而不修改任何 CSS 后仍然有效。 IE9+ 支持是非常可取的。 CSS ONLY 解决方案也非常受欢迎。如果到明天没有出现符合此类标准的答案，我会将下一个最有用的答案标记为正确。

（我正在使用粉底以防有帮助）

可玩的 JSFiddle： https://jsfiddle.net/o47xeze7/

<div class="parent">
    <div class="child">abcdfg</div>
    <div class="child">abcdfg</div>
</div>

.parent {
    width: 100%;
    height: 20rem;
    border: 1px solid black;
    display: table;
}
.child {
    border: 1px solid red;
    display: block;
    vertical-align: bottom;
}

更新：我是个白痴...我所要做的就是创建一个绝对底部定位的容器并让它向上生长。当我说没有绝对定位的元素时，我之所以这么说是因为我不想要任何带有 margin-top: x-pixels 之类的东西，因为每次添加新行时它都需要更新该值，但是做一个绝对底部放置的容器不会't。对不起大家。如果有人需要，这是可行的解决方案。 https://jsfiddle.net/b6akcdso/

<div class="parent">
    <div class="bottom-aligned-contanier">
        <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus expedita praesentium aperiam, eveniet in, dolore iusto excepturi quibusdam accusantium delectus aut atque assumenda quaerat recusandae perferendis repellat labore, explicabo maiores.</div>
        <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti minima nostrum, tenetur autem, debitis magni vel facere laudantium incidunt asperiores aliquam cupiditate cum perferendis cumque inventore, dignissimos ad in.</div>
        <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum impedit deleniti, id voluptatum est! Quibusdam ea fugit obcaecati minima soluta, quis voluptate aspernatur corrupti, minus tempore ipsa adipisci porro. Ab.</div>
    </div>
</div>

.parent {
    width: 100%;
    height: 20rem;
    background-color: lightgray;
    position: relative;
}

.bottom-aligned-contanier {
    position: absolute;
    bottom: 0;
}

.child {
    display: block;
    width: 100%;
    background-color: darkgray;
    color: white;
}

.child:nth-child(2n) {
    background-color: gray;
}

将正确答案授予给了我这样做想法的人。

Answer 1

如果您可以使用 jQuery，则此解决方案有效。这是一个fiddle：https://jsfiddle.net/o47xeze7/3/

HTML

<div class="parent">
    <div class="bottom">
        <div class="child">abcdfg</div>
        <div class="child">abcdfg</div>
    </div>
</div>

CSS

.parent {
    width: 100%;
    height: 20rem;
    border: 1px solid black;
    display: block;
}

.child {
    border: 1px solid red;
    display: block;
}

.bottom {
    display: block;
    position: relative;
}

jQuery

$(function() {
    var parentHeight = $(".parent").height();
    var bottomHeight = $(".bottom").height();
    var difference = parentHeight - bottomHeight;

    $(".bottom").css("margin-top", difference);
});

Answer 2

flexbox 可以做到。

.parent {
  width: 100%;
  height: 10rem;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 1em;
}
.content {
  align-self: flex-start;
  margin-bottom: auto;
}
.child {
  width: 100%;
  border: 1px solid red;
  margin: 0;
}

<div class="parent">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
  </div>
  <div class="child">top</div>
  <div class="child">bottom</div>
</div>

<div class="parent">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
  </div>
  <div class="child">top</div>
  <div class="middle">middle</div>
  <div class="child">bottom</div>
</div>

JSfiddle Demo

Answer 3

如果您准备放弃对 IE8 和 IE9 的支持，那么这可能是最适合您的解决方案，因为您不想使用 absolute/table-cell 定位。

您可以使用 flexbox 实现您想要做的事情。以下是您的案例的处理方式：

.parent {
  width: 100%;
  height: 20rem;
  border: 1px solid black;
  display: flex;
  flex-direction: column-reverse;
}
.child {
  border: 1px solid red;
}

<div class="parent">
  <div class="child">abcdfg</div>
  <div class="child">abcdfg</div>
</div>

如何在不使用任何类型的 "absolute" 定位的情况下将 2 个或更多 "row" div 对齐到 div 的底部？需要IE9+支持

How can I align 2 or more "row" divs to the bottom of a div, without using any kind of "absolute" positioning? Needs IE9+ support

html

css

vertical-alignment

zurb-foundation