css - 在两列之间制作一个 div 容器

Question

这是我的代码 http://jsfiddle.net/BxQ8n/2/ `

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. 消除 Logo 和菜单之间的空格

Answer 1

要使 Logo 正确显示，请将图像包裹在一个 div 中并设置一个确定的高度。对于 3 列布局，您需要创建 3 个 div，div1、div2 和 div3。所有这些 div 都需要 float:left 宽度加起来等于容器宽度。

这是固定的 fiddle :http://jsfiddle.net/7zqhb/4/

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

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

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

无论如何它都不干净和语义化，但你明白我的意思。