底部对齐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/

我想要的是让两个“Text”div与gRow div的底部对齐。

我不知道渲染时gRow的高度，因为文本随所选语言而变化。我已经尝试定位gRow亲戚和我的内部div的绝对，底部：0但是徒劳。

我可以做我想做的事情或者我需要知道gRow div的高度吗？

编辑：忘了一件事：我希望从gRow的顶部到底部有一个正确的边界。

提前致谢！

Answer 1

如果你需要使用div而不是表来执行此操作，可以使用display:table的css来使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%;}

然后您可以随意添加行和单元格。

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

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

Answer 2

如果我理解正确的问题，this就是您正在寻找的。

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;
}