html - 在CSS中为两个div设置相同的高度

Question

我试图将两个 div 对齐在同一行上。没问题，但现在我正在寻找一个在每个 div 上具有相同高度的解决方案，问题是第一个只包含一个图标，第二个包含可能比图标占用更多空间的文本。我正在寻找可以帮助我做到这一点的 css 属性...

.zone-info {
    background-color: #e0f1f5;
    line-height: 1.363em;
    margin-bottom: 3px;
    padding: 5px 0;
}

.zi-icon {
    display: inline-block;
    float: left;
    text-align: center;
    vertical-align: center;
    height: 100%;
    width: 10%;
}

.zi-text {
    width: 90%;
    display: inline-block;
    float: left;
}

<div class="zi-icon zone-info">icone</div>
<div class="zi-text zone-info">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.<br>
    # Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.<br>
    # Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</br>
    # Sed ut perspiciatis unde omnis iste natus error sit. 
</div>

这是我目前所做工作的 Jsfiddle。 http://jsfiddle.net/nc6L227z/

Answer 1

将两个 div 包装在一个 .wrapper 元素中并给出 display: table。然后将 display: table-cell 给内部 div 并从其他元素中删除 float:left 和 display: inline-block :

编辑:(添加垂直对齐)

检查 Updated DEMO

.wrapper { display: table }
.zone-info {
    background-color: #e0f1f5;
    display: table-cell;
    line-height: 1.363em;
    vertical-align: middle;
}

.zi-icon {
    text-align: center;
    width: 10%;
}

.zi-text {
}