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/

我想要的是：

创建另一个将在我的两列之间的div
消除徽标和菜单之间的空间

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

注意宽度和宽度。主容器的高度

在两列之间创建一个div容器

3 个答案: