Css佈局重疊

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

好吧看過你的代碼使用螢火蟲。

你爲什麼要插入多個

<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 =「新聞1」，ID =「新聞2」將它們分開......

---編輯---

嗯，我已經嘗試過了，並期待：

HTML您COL1之一（同爲雙方）。

<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菲利普說，對方使用下面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/