css - 底部对齐 div 而不指定父容器高度

Question

我有一些这样的html

<div class="gRow">
    <div class="cell c9 right last">Text</div>
    <div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
    <div class="cell c7 right gCol7">Text</div>
</div>

看到这个小提琴：http: //jsfiddle.net/LmZYE/

我想要的是让两个“文本”div 对齐到 gRow div 的底部。

我不知道渲染时 gRow 的高度，因为文本会随所选语言而变化。我尝试过定位 gRow 相对和我的内部 div 的绝对值，bottom:0 但徒劳无功。

我可以做我想做的事情还是我需要知道 gRow div 的高度？

编辑：忘了一件事：我想要一个从 gRow 的顶部到底部的右边框。

提前致谢！

Answer 1

如果您需要使用 div 而不是表格来执行此操作，您可以使用 css fordisplay:table让您的 div 像表格一样响应：

html

<div class="table">
    <div class="row">
        <div class="cell c9 right last">Text</div>
        <div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
        <div class="cell c7 right gCol7">Text</div>
    </div>
</div>

css

.table {display:table; border-right: 1px solid red;}
.row {display:table-row;}
.cell {border-left: 1px solid red; display:table-cell; width:33%;}

然后，您可以根据需要继续添加行和单元格。

vertical-align如果要将文本与 div 的中间或底部对齐，也可以利用该属性

http://jsfiddle.net/LmZYE/6/

Answer 2

如果我正确理解了这个问题，那么这就是您要寻找的。

HTML

<div class="gRow">
    <div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
    <div class="bottomRow">
        <div class="cell c9 right last">Text</div>
        <div class="cell c7 right gCol7">Text</div>
    </div>
</div>

CSS

.gRow {
    width:400px;
    overflow: hidden;
    position: relative;
    border: 1px solid #d3d3d3;
    padding-bottom: 20px;
}
.bottomRow {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.c7, .c8, .c9 {
    width:80px
}
.right {
    float: right;
}
.cell {
    border-left: 1px solid red;
}