如何使用CSS创建两列？

Question

我是CSS的新手，我想知道如何在包装器中创建两列和两行。第一行包含标题图像。这是我的代码：http://sudrap.org/paste/text/24958/

我想要实现的目标：

编辑：这是整个html http://sudrap.org/paste/text/24961/

Answer 1

您不需要所有HTML。它可以这么简单：

<div id="main-wrapper">
    <div class="left-box">
        <h2>Oyunlar</h2>
        <ul>
            <li>...</li>
        </ul>
    </div>
    <div class="right-box">
        <h2>Sunumlar</h2>
        <ul>
            <li>...</li>
        </ul>
    </div>
    ...
</div>

使用以下CSS：

.left-box, .right-box {
    width: 15em;
    float: left;
}
.right-box {
    border-left:1px solid #999;
}
.right-box h2 {
    margin-left: -1px; /* hide box border */
}
.box h2 {
    background-color: #D8E9E6;
    border-top: thin solid #97b4e0;
    border-bottom: thin solid #97b4e0;
}