Div容器自动高度

Question

我的div容器存在很大问题。

我有一个文本所在的容器，它有动态高度，并且有一个带有图标的容器，可以调整文本的高度。但带有图标的Container具有固定的高度。

这里是Fiddle的链接：

FIDDLE

Answer 1

您可以使用display:table;和display:table-cell;显示属性来获取您想要的内容。

CSS：

.div-table {
    display:table;
    width:100%;
    border:3px solid #333;
}
.div-table .div-table-cell {
    display:table-cell;
    vertical-align:middle;
}
.div-table .text-cell {
    width:80%;
    padding:10px 20px;
}
.div-table .icon-cell {
    width:20%;
    background:#999;
    color:#fff;
    font-size:4em;
    text-align:center;
}

小提琴链接：http://jsfiddle.net/ravimallya/uNV8G/2/