Question

我正在使用不同的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/

我该如何解决这个问题？

提前致谢。

Answer 1

以下是实现该目标的一种方法

.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的底部来实现的。
这是一个fiddle

另一种方式是这样的：

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

这是第二个选项的fiddle 从这两个选项我个人会去第一个，但是你应该注意固定的宽度和高度（因为绝对定位）。

将文本放在底部而不是其他文本的正下方

1 个答案: