css - 如何使用 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;
}