0

这是我的代码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. 消除标志和菜单之间的空间
4

3 回答 3

1

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

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

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

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

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

无论如何，它都不干净和语义化，但我认为你明白了。

于 2013-05-01T15:03:53.473 回答
1

把它们放在自己的容器里，就像这样

<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 像素。

希望这是有道理的

于 2013-05-01T15:09:00.343 回答
1

确保你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;
    }

注意主容器的宽度和高度

于 2013-05-01T15:26:37.240 回答