html - 无法在父级中垂直对齐并排的子 div

Question

我有三个子 div 并排坐在父 div 中。左边和右边是固定宽度，而中间是可变宽度，需要随浏览器调整大小。由于它们的高度不同，我需要将它们垂直对齐到父级内部，但我无法让它们对齐，并且它们粘在顶部。有什么办法可以做到这一点？子 div 的高度是固定的，但父 div 的高度应该是可变的。

CSS:

#divMain { width: 100%; min-width:320px; height:400px}
#div1 { width: 100px; height: 200px; float: left; red;vertical-align:middle;display:inline-block; }
#div2 { margin-left: 110px; height: 400px; margin-right: 110px; vertical-align:middle;}
#div3 { width: 100px; height:300px; float: right; vertical-align:middle;display:inline-block;}

HTML

<div id="divMain">
    <div id="div1"></div>
    <div id="div3"></div>
    <div id="div2"></div>
</div>

Answer 1

下面是一种无需 JS 的方法，使用侧 divs 上的 position: absolute 实现此目的:

fiddle :http://jsfiddle.net/Xa8TW/2/

CSS

#divMain {
    width: 100%;
    min-width:320px;
    position: relative;
}
#div1 {
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}
#div2 {
    height: 600px;
    margin: 0 110px;
    background-color: green;
}
#div3 {
    width: 100px;
    height:300px;
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -150px;
}

HTML 可以保持不变，但现在也可以交换 #div2 和 #div3 的位置，因为没有 float 元素需要特定的订单。