html - 具有浮动、高度相等和垂直对齐的 CSS 两列设置

Question

我想要一个带有页眉、页脚和两列内容的布局。到目前为止，另一个论坛中的答案让我走到了这一步：http: //jsfiddle.net/bolucpap/FZek3/（参见下面的源 HTML 和 CSS）。我想要实现的是行数较少的列表（在此示例中为列表 B，但动态数据可能意味着情况相反）具有与行数较多的列表（本例中的列表 A）高度相等的容器例子）。另外，我想让列表在它们的容器中垂直居中。无论如何只用 HTML 和 CSS 来做到这一点，还是我必须干涉使用 JavaScript？

HTML：

<div class="headerfooter">
    Header Text
</div>
<div id="container">
    <div id="leftcolumn">
        List A:
        <ul>
            <li>Item A1</li>
            <li>Item A2</li>
            <li>Item A3</li>
            <li>Item A4</li>
        </ul>
    </div>
    <div id="rightcolumn">
        List B:
        <ul>
            <li>Item B1</li>
            <li>Item B2</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<div class="headerfooter">
    Footer Text
</div>

和 CSS：

#leftcolumn {
    height: 100%;
    width: 50%;
    border: 1px solid red;
    float: left;
    margin-left: -2px
}
#rightcolumn {
    height: 100%;
    width: 50%;
    border: 1px solid red;
    float: right;
    margin-right: -2px
}
.clear {
    clear: both;
}
#container {
    border: 1px solid blue;
}
.headerfooter {
    border: 1px solid green;
}

Answer 1

你为什么不创建一个表？如果你需要 ie 支持使用 table 和 td 标签而不是 display: table 和 display: table-cell。

此处需要 box-sizing 以便将边框计为容器宽度的一部分。但你可以不用它

div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#container {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
#leftcolumn {
    display: table-cell;
    width: 50%;
    border: 1px solid red;
    vertical-align: middle;
}
#rightcolumn {
    display: table-cell;
    width: 50%;
    border: 1px solid red;
    vertical-align: middle;
}

Answer 2

尝试 css column-count：

.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count