自动匹配左侧框的高度

Question

我不确定这是否可以使用纯CSS完成，还是需要jQuery？无论如何，我希望盒子的两边都是相同的高度，所以如果右边的内容比左边的内容长，左边的内容将跟随右边框的高度。

这是我的fiddle

我的CSS

#wrapper {
    width: 300px;
}
.box {
    width:100px;
    background: #ccc;
    float:left;
    margin: 10px;
}
.box:nth-child(2n+0) {
    height:auto;
}

Answer 1

尝试使用display:table

demo

#wrapper {
    width: 300px;
    display:table;
}
.box {
    width:100px;
    background: #ccc;
   /* float:left;*/
    display:table-cell;
   border: 10px solid #fff;
    padding:10px;
}