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. 私の2つの列の間にある別のdivを作成します
  2. ロゴとメニューの間のスペースをなくす
4

3 に答える 3

1

私float:leftの意見では、それがウェブサイトを構築する最も簡単な方法です。その後、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 に答える
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

ロゴが適切に表示されるようにするには、画像を div で囲み、特定の高さを設定します。3 列のレイアウトの場合、div1、div2、および div3 の 3 つの div を作成する必要があります。これらすべての 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 に答える