我正在使用不同的DIV标记充当表格,我想在内容DIV的底部获得另一个DIV。

<div class="table">
    <div class="table-row">

        <div class="table-information">
            Content
        </div>

        <div class="table-content">
            More content

            <div class="extra">
                Here's the extra content
            </div>
        </div>

    </div>
</div>

这是CSS:

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-information {
    background-color: #eaeaea;
    height: 150px;
    padding: 10px 15px;
    width: 150px;
}

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
}

.extra {
    vertical-align: bottom
}

如您所见,我有vertical-align: bottom; extra课程。 我想让内容位于该DIV的底部,而不是文本More content正下方。 但是,当我尝试此解决方案时,没有任何反应。

http://jsfiddle.net/edgren/3jjbV/

我怎么解决这个问题?

提前致谢。

===============>>#1 票数:0 已采纳

这是实现这一目标的一种方法

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
    position:relative;
    width:150px;
}
.extra {
    vertical-align: bottom;
    bottom:0;
    position:absolute;
}

我通过将相对位置添加到容器table-content ,然后将绝对位置底部添加到extra来做到这extra
这是一个小提琴


另一种方式是这样的:

.extra {
    vertical-align: bottom;
    display:table-cell;
    height: 150px;
    width:150px;
} 

这是第二个选项的小提琴
我个人会从这两个选项中选择第一个,但您应注意固定的宽度和高度(因为绝对位置)。

  ask by Erik translate from so

未解决问题?本站智能推荐: