html - 如何使我的两个并排 div 具有相同的高度？

Question

My code @ JSFiddle

code that is needed
for linking JSFiddle
links
I don't understand why I need
this.

An image of the two divs, their the gray boxes.

如何使这两个 div 具有相同的高度？我不想做 padding-bottom: px;和底部边距:-px；这看起来真的像是作弊而且只是被操纵了。

Answer 1

您可以使用 display:table 和 display:table-cell:

#who-is {
    width: auto;
    display: table;
}

#left {
    width: 40%;
    padding: 5%;
    text-align: center;
    background: #CCC;
    display: table-cell;
}

#left h1 {
    font-size: 72px;
    text-transform: uppercase;
}

#right {
    width: 40%;
    padding: 5%;
    background: #eee;
    display: table-cell;
}

#right p {
    font-size: 16px;
}

fiddle