Question

您好我想在css中获取我的列以进入页面。我是css的新手，但是知道一些用来搞乱事情的CSS。

我的列彼此相邻

collum1 collum2

我试图让它们像这样下载到页面

collum1
collum2

但似乎不想动......

这是我左侧栏的页面来源。

<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”......

--- --- EDIT

好吧，我试过了，看看：

enter image description here

你的一个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，那就是现场

Answer 2

我建议删除

float:left;

来自列...并添加：

display:block;

Answer 3

我建议将两列放入div：

<div class="sidebar"> 
       <div id="col1"></div> 
       <div id="col2"></div>
</div>

现在float: left;适用于中心框和左侧边栏。为了让col1和col2在彼此之下，请使用Philip display: block;

编辑：

如果你想让盒子右侧的第二列在第一列的左侧，你已经有了第一列，那么只需添加如下：

<div id="col1">
   First column content

   <div id="col1>
       Second column content
   </div>
</div> 
<div id="col2"></div>

Link to the html file with css

Answer 4

在这里：http://jsfiddle.net/d47Vs/

Css布局重叠

4 个答案: