在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从其他元素中删除:

编辑:( 添加垂直对齐)

检查更新的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 {
}