使两列

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; 
    } 

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