Question

我有三个孩子在父母身边并排坐着。左边和右边是固定宽度，而中间是可变宽度，需要使用浏览器调整大小。由于它们具有不同的高度，我需要将它们垂直对齐在父级内部，但我无法将它们连接到它们，并且它们会粘在顶部。有什么方法可以做到这一点吗？子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的方法，可以使用侧面div上的position: absolute来实现这一点：

小提琴：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的位置，因为没有需要特定顺序的浮动元素。

Answer 2

DIV的高度是否固定？从您的代码看来，高度固定为400px。如果这是真的那么解决方案非常简单 - 只需向margin-top提供div1和div3。

我已经为此创建了小提琴并删除了一些无用的CSS片段（这些片段并没有什么区别）。看看

http://jsfiddle.net/8kv2K/

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

2 个答案: