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。

这里需要使用框大小来将边框计算为容器宽度的一部分。但你可以没有它

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

CSS两列设置，具有浮动，高度相等和垂直对齐

2 个答案: