css - 如何垂直对齐不同高度的div？

Question

我有以下设置

HTML

<div id="wrap">
    <div id="box1" class="list"></div>
    <div id="box2" class="list"></div>
    <div id="box3" class="list"></div>
    <div id="box4" class="list"></div>
    <div id="box5" class="list"></div>
    <div id="box6" class="list"></div>
    <div id="box5" class="list"></div>
    <div id="box3" class="list"></div>
    <div id="box1" class="list"></div>
    <div id="box4" class="list"></div>
    <div id="box6" class="list"></div>
    <div id="box2" class="list"></div>
</div>

CSS

#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;}
.list{display: inline-block;margin: 0px 10px;}

#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}

fiddle

每个<div class="list">实际上会保存一个图像，但出于这个目的，如果图像在那里，我将宽度和高度设置为 divs 的高度。是的，我没有重复的 ID，但实际上这些 div 没有 ID，只有类。

无论如何，我正在尝试让这些 div 垂直对齐每一行。垂直对齐需要是动态的，如果最高的框(即 #box3 )从一行中删除(因为重新调整大小的窗口将其移动到不同的行或者它从 HTML 中一起删除)该行应相应调整(例如，如果 #box3 和 #box5 在同一行，其他行几乎接触 #box3 边界，当所有 #box3 被删除时，其他行现在应该几乎接触 #box5 边界)

如您所见，我已经在使用垂直对齐但无济于事。那么我还需要什么其他 CSS？

Answer 1

只需将 vertical-align 设置为元素本身而不是包装。

CSS

#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}

参见 DEMO