html - Css布局重叠

Question

您好，我正在尝试让我的 CSS 列在页面下方显示。我是 css 的新手，但知道一些 css 来弄乱东西。

我的专栏像这样并排放置

colum1 colum2

我正试图让他们像这样在页面上向下移动

colum1
colum2

但似乎不想动...

这是左侧栏的页面源代码。

<div class="col1">

            <div class="box" id="news">

                <h1 id="news_handle">Home</h1>

                <ul>
                    <li><a href="login.php">Login</a></li>
                    <li><a href="../register.php">Register</a></li>
                </ul>

                <div class="bar">
                    <span>
                <span></span></span></div>

            </div>


  <div class="box" id="events"></div>
</div>


<div class="co22">

            <div class="box" id="news">

                <h1 id="news_handle">22</h1>

                <ul>
                    <li><a href="login.php">1212</a></li>
                    <li><a href="../register.php">1212</a></li>
                </ul>

                <div class="bar">
                    <span>
                <span></span></span></div>

            </div>


  <div class="box" id="events"></div>
</div>

然后这是我的css样式/文件

body
{
    background: #122530 url('./images/background.jpg') repeat-y;
    text-align: center;
    font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}

a,a:visited
{
    color: #1e3f51;
}
a:hover
{
    text-decoration: none;
}

a img,a:visited img
{
    border: 0;
}


/**
 * General Structure
 */

div#container
{
    width: 873px;
    margin: 0 auto 0 auto;
    text-align: left;
}


/**
 * Banner/Nav
 */
div#banner
{
    height: 255px;
    background: url('./images/banner.jpg') no-repeat;
    margin: 0 0 10px 0;
    clear: both;
}

div#nav
{
    background: url('./images/nav_bg.jpg') no-repeat;
    height: 35px;
    margin: 1px 0px 0px 2px;
    width: 100%;
    overflow: hidden;
    float: left;
}

    div#nav a
    {
        color: #ffffff;
        font: bold 10px Tahoma, Arial, Hevetica, Sans-serif;
        text-decoration: none;
        height: 12px;
        display: block;
        float: left;
        padding: 11px 7px 11px 7px;
        text-transform: uppercase;
        margin: 1px 0 0 0;
    }

    div#nav a:hover
    {
        background: url('./images/nav_hover.jpg') repeat-x;
    }


/**
 * Columns
 */
div.col1,div.col2
{
    float: left;
}

div.col1
{
    width: 190px;
}

div.col2
{
    width: 479px;
    margin: 0 7px 0 7px;
}


/**
 * Columns
 */
div.co22
{
    float: left;
}

div.co22
{
    width: 190px;
}

div.co22
{
    width: 479px;
    margin:25px 50px 75px;
}


/**
 * Box Elements
 */
div.box
{
    margin: 0 0 10px 0;
}

div.box h1
{
    height: 29px;
    color: #ffffff;
    font: 15px 'Trebuchet MS', Tahoma, Arial, Helvetica, Sans-serif;
    padding: 6px 0 0 10px;
    margin: 0;
    border-bottom: 1px solid #112735;
    cursor: move;
}

    div.col2 div.box h1
    {
        cursor: auto;
    }

    div.col1 div.box h1
    {
        background: url('./images/col1_head.jpg') no-repeat;
    }

    div.col2 div.box h1
    {
        background: url('./images/col2_head.jpg') no-repeat;
    }


div.box div.bar
{
    height: 23px;
    clear: both;
    background: url('./images/box_foot.jpg') repeat-x;
    color: #d1e3ee;
    font: 11px Tahoma;
}

    div.box div.bar span
    {
        height: 23px;
        display: block;
        background: url('./images/box_foot_left.jpg') no-repeat;
        float: left;
        padding: 4px;
    }

    div.box div.bar span span
    {
        height: 23px;
        width: 2px;
        background: url('./images/box_foot_right.jpg') top right no-repeat;
        float: right;
        display: block;
        margin: -4px;
    }

    div.box div.bar a
    {
        display: block;
        color: #d1e3ee;
        text-decoration: none;
    }
    div.box div.bar a.right
    {
        text-align: right;
    }

div.content
{
    margin: 0 2px 0 2px;
    background: #c1dae8 url('./images/body_bg.jpg') repeat-x;
    border: 1px solid #ffffff;
    padding: 10px 0 10px 0;
}

    div.content p
    {
        margin: 0;
        padding: 5px;
    }


/**
 * Lists
 */
ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul li
    {
        background: url('./images/list_item.jpg') repeat-x;
        border: 1px solid #112735;
        border-top: 0px;
        height: 14px;
        padding: 4px;
    }

    ul li a
    {
        display: block;
        text-decoration: none;
        height: 14px;
    }

ul.sponsors li
{
    background: url('./images/list_sponsor.jpg') repeat-x;
    height: 48px;
    padding: 0;
}

    ul.sponsors li a
    {
        height: 48px;
    }


/**
 * Footer
 */
div#footer
{
    background: url('./images/footer.jpg') no-repeat;
    height: 36px;
    clear: both;
}

div#footer a
{
    display: block;
    height: 36px;
}

div#footer a span
{
    display: none;
}

我已经醒了 12 个小时，通过谷歌搜索并试图将它们归为一类，但没有成功。

Answer 1

好的，已经使用 firebug 查看了您的代码。

为什么要插入多个

<div class="col1">
    ...
</div>

您应该将所有框放在同一个 col1 中。您不需要其中两个。

基本上，不要使用两个版本的 col1，而是将所有框放在同一个 col1 中，一个在另一个下面。

<div class="col1">
    <div class="box" id="news" style="position: relative; "></div>
    <div class="box" id="events" style="position: relative; "/> </div>
    <div class="box" id="news" style="position: relative; "></div>
    <div class="box" id="events" style="position: relative; "/> </div>
</div>

如果您需要直接访问每个框，然后使用不同的 id 将它们分开，id="news1", id="news2"...

---编辑---

好吧，我试过了，看看:

其中一个 col1 的 HTML(两边相同)。

<div class="col1">

    <div class="box" id="news">

        <h1 id="news_handle">Home</h1>

    <ul>

    </ul>

    <div class="bar">
        <span>
        <span></span></span></div>
    </div>
    <div style="height:20px;">&nbsp;</div>
    <div class="box" id="sponsors">

    <h1 id="news_handle">Home</h1>
    <ul>
            <li><a href="login.php">Login</a></li>
    <li><a href="../register.php">Register</a></li>
    </ul>
    <div class="bar"> <span> <span></span></span></div>
    </div>


    <div class="box" id="affiliates"></div>


    <div class="box" id="items"></div>


</div>

我没有改变你的CSS，那是活的