1

我有两个选择框和一个按钮面板，用于来回移动选项。现在它看起来像下面的第一张图片，我想将按钮与列表框垂直对齐，如下面的第二张图片

在此处输入图像描述

JSFiddle在这里

任何帮助/指针都会很棒。

4

3 回答 3

3

您可以使用 css 表。首先，你需要这个脚手架：

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

[...]

<div class="table">
    <div class="row">
        <div class="cell">Lorem [...]</div>
        [...]
    </div>
</div>

接下来，单元格的垂直排列由vertical-align: top|bottom|middle|baseline 确定。在引擎盖下：高度低于其行的单元格会自动接收顶部或底部填充。这样，一个单元格和一行就等于一。

查看您更新的代码：http: //jsfiddle.net/Fq93w/21/。这是 IE <= 7 的解决方法：

#rightListDiv, #controlPanel, #LeftListDiv {
    display: inline;
    zoom: 1;
}
于 2012-05-29T17:17:10.337 回答
2

margin-top根据您的需要添加价值，请参阅更新的小提琴：

http://jsfiddle.net/Fq93w/11/

于 2012-05-29T16:38:05.410 回答
0

Probably wrapping evrything inside one div and giving margin-top in % for controlPanel div, may work for you.

于 2012-05-29T16:48:42.593 回答