使兩列

Question

之間一個div容器這裏是我的代碼​​`

body 
{ 
    background:url('http://i42.tinypic.com/2e5pbbc.jpg'); 
    margin: 0; 
    padding: 0; 
    color: white; 
} 

div.container 
{ 
    border: 1px solid white; 
    width: 800px; 
    margin: auto; 
} 

div.container img#logo 
{ 
    border: 1px solid yellow; 
    height: 200px; 
    width: 800px; 
} 

div.container div.top20 
{ 
    border: 1px solid green; 
    width: 200px; 
    height: 400px; 
} 

div.container div.menu 
{ 
    border: 1px solid blue; 
    height: 50px; 
    width: 796px; 
} 

div.container div#login 
{ 
    border: 1px solid orange; 
    width: 200px; 
    height: 150px; 
    float: right; 
    clear: right; 
} 

div.container div#search 
{ 
    border: 1px solid purple; 
    width: 200px; 
    height: 80px; 
    float: right; 
    clear: right; 
} 

input 
{ 
    width: 180px; margin: 0.5em 0 0 0.55em; 
} 

input.btn 
{ 
    margin: 0.5em 0 0 0.4em; 
    width: 190px; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #555555; 
    font-weight: bold; 
} 

div.container div#other 
{ 
    border: 1px solid cyan; 
    width: 200px; 
    height: 570px; 
    float: right; 
    clear: right; 
} 

這裏是全屏結果http://jsfiddle.net/BxQ8n/2/embedded/result/

我想需要的是：

1. 創建另一個的div將在我的兩列之間
2. 消除徽標和菜單之間的空白

Answer 1

爲了使徽標正確顯示，請將圖像封裝在div中並設置一個確定的高度。 對於3列布局，您需要創建3個div，div1，div2和div3。所有這些div都需要浮動：左邊的寬度將加上容器寬度。

這裏的固定小提琴：http://jsfiddle.net/7zqhb/4/

#left{ 
float: left; 
width: 200px; 
} 

#middle{ 
float: left; 
width: 400px; 
} 

#right{ 
    float: left; 
    width: 200px; 
} 

這是不以任何方式清潔和語義，但你得到我認爲這一點。

Answer 2

所以像這樣

<div id="Containerleft"> 
    <div id="top 20 songs"></div> 
    <div id="top 20 artists"></div> 
</div> 
<div id="Containermiddle"> 
    <div id="content"></div> 
</div> 
<div id="Containerright"> 
    <div id="login"></div> 
    <div id="other"></div> 
</div> 

浮動都使他們在有自己的飯盒，左，這應該解決您的問題 這也設置寬度以適應主容器，所以如果你的主容器100使左容器20，中間60和右20像素。

希望這是有道理

Answer 3

確保您float:left你div的，這是在我看來，建立一個網站，最簡單的方法。 之後，你可以給你的div不同Height & Width。

<div id="Containter"> 
    <div id="LeftPart"> 
     <div id="T20Songs">top 20 songs</div> 
     <div id="T20Artists">top 20 artists</div> 
    </div> 
    <div id="MiddlePart"> 
     <div id="MainContent">MainContent</div> 
    </div> 
    <div id="RightPart"> 
     <div id="Login">Login</div> 
     <div id="Other">Other</div> 
    </div> 
</div> 

的CSS：

Containter { 
    width:900px; 
    } 
    LeftPart { 
    float:left; 
    width:200px; 
    } 

    MiddlePart { 
    float:left; 
    width:500px 
    } 

    RightPart { 
    float:left; 
    width:200px; 
    } 

注意你的主容器的寬度&高度