1

我有三个孩子并排坐在父母里面。左右为固定宽度，中间为可变宽度，需要随浏览器调整大小。由于它们的高度不同，我需要将它们垂直对齐在父对象内部，但我无法让它们到达，它们会粘在顶部。有什么办法可以做到这一点吗？子 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>
4

2 回答 2

1

position: absolute这是使用侧面 div实现此目的的无 JS 方式：

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

于 2013-08-08T10:28:01.250 回答
0

DIV 的高度是固定的吗？从您的代码看来，高度固定为 400 像素。如果这是真的，那么解决方案非常简单——只需提供一个margin-toptodiv1和div3.

我为此创建了小提琴并删除了一些无用的 CSS 片段（它们没有任何区别）。看一看

http://jsfiddle.net/8kv2K/

于 2013-08-08T10:02:47.710 回答