如何对齐 2 个或更多“行"?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

问题描述

我需要在容器底部放置几个 div 行，类似于这里的图像:

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

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

(如果有帮助，我正在使用基础)

JSFiddle 玩:https://jsfiddle.net/o47xeze7/

<div class="child">abcdfg</div><div class="child">abcdfg</div>
.父母{宽度:100%；高度:20rem；边框:1px纯黑色；显示:表；}.孩子 {边框:1px纯红色；显示:块；垂直对齐:底部；}

<小时>

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

<div class="bottom-aligned-contanier"><div class="child">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Repellendus expedita praesentium aperiam，eveniet in，dolore iusto excepturi quibusdam accusantium delectus aut atque asksnda quaerat recusandae perferendis repelt laboure，explicbo maiores.</div><div class="child">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Corporis deleniti minima nostrum、tenetur autem、debitis magni vel facere laudantium incidunt asperiores aliquam cupiditate cum perferendis cumqueinventre、dignissimos ad in.</div><div class="child">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.暨阻碍 deleniti，id voluptatum est！Quibusdam ea fugit obcaecati minima soluta，quis voluptate aspernaturcorruptioni，减去 tempore ipsa adipisci porro.抗体

.父母{宽度:100%；高度:20rem；背景颜色:浅灰色；位置:相对；}.bottom-aligned-contanier {位置:绝对；底部:0；}.孩子 {显示:块；宽度:100%；背景颜色:深灰色；白颜色;}.child:nth-child(2n) {背景颜色:灰色；}

给给我这个想法的人奖励正确的答案.

解决方案

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

HTML

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

CSS

.parent {宽度:100%；高度:20rem；边框:1px纯黑色；显示:块；}.孩子 {边框:1px纯红色；显示:块；}.底部 {显示:块；位置:相对；}

jQuery

$(function() {var parentHeight = $(".parent").height();var bottomHeight = $(".bottom").height();var 差异 = parentHeight - bottomHeight;$(".bottom").css("margin-top", 差异);});

I need to position several div rows to the bottom of a container, similar to the image here:

My problem lies in that almost every solution on SO requires either absolute positioning or some method which requires modification every time a new element is added. I tried using a display:table-cell and vertical-align:middle, but this broke my row layout (all rows had display:block;). Is there a way to get this done in a way I can keep adding html rows to the layout and it will grow from the bottom to the top without modifying the CSS?

Edit: The answer NEEDS to still work after adding a new row without modifying any CSS. IE9+ support is highly preferable. CSS ONLY solution is also highly preferred. If no answers with such criteria appear by tomorrow I'll tag the next most useful one as right.

(I'm using foundation in case that helps)

JSFiddle to play with: 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;
}

---

UPDATE: I'm an idiot... All I had to do was create a container with absolute bottom positioning and let it grow updwards. When I said no absolute positioned elements I said it because I don't want anything with the likes margin-top: x-pixels, because it requires updating that value every time I add a new row, but doing an absolute bottom placed container doesn't. Sorry guys. Here is the working solution in case anyone wants it. 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;
}

Awarding right answer to the guy that gave me the idea to do this.

解决方案

If you can use jQuery, then this solution works. Here is a 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);
});

这篇关于如何对齐 2 个或更多“行"?div 到 div 的底部，不使用任何类型的“绝对"；定位?需要 IE9+ 支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！