0

単純な3列のテンプレートを作成しようとしています

これは私のCSSコードです：

#page {
   padding: 0px;
   height: 100%;
   width: 900px;
   margin-right: auto;
   margin-left: auto;
   float: none;
   margin-top: 0px;
   margin-bottom: 0px;
}

#header {
   height: 250px;
   width: 900px;
   margin-right: auto;
   margin-left: auto;
}
#right-column {
   float: right;
   width: 200px;
}
#left-column {
   float: left;
   width: 200px;
}
#center-column {
   width: 490px;
   margin-right: auto;
   margin-left: auto;
}

そして私のHTMLコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title></head>

   <body>
      <div id="page">
         <div id="header">
            <img src="header.png" width="900" height="250" />
         </div>
         <div id="page-content">
            <div id="left-column">Content for  id "left-column" Goes Here</div>
            <div id="center-column">Content for  id "center-column" Goes Here</div>
            <div id="right-column">Content for  id "right-column" Goes Here</div>
         </div>
      </div>
   </body>
</html>

私が得るものはこれです：

出力

問題は、右の列の上部にこの「マージン」があるのはなぜですか。左列と中央列は中道右列と同じように作成されますが、右列にはこの「マージン」があります。どうすれば修正できますか？

4

3 に答える 3

2

すべての列は次のように左にフローティングする必要があります：

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

}
#center-column {
   width: 490px;
   float:left;
}

このフィドルを参照してください。

ページコンテンツの高さがフローティングコンテンツのサイズに合うようにしたい場合は、clearfixを使用する必要があります。別の例については、ここを参照してください。

于 2013-03-14T20:24:36.123 に答える
1

右側の列に実際のマージンスペースはありません。右に浮いていますが、中央の列のマージンスペースがそれを作っているので、列の合計幅は100％より大きくなります。

簡単な解決策は、残っているものすべてをフロートさせることです。コンテナの幅が890pxに収まるようにしてください。

これを試して...

#right-column {
   float: left;
   width: 200px;
}
#left-column {
   float: left;
   width: 200px;
}
#center-column {
   float: left;
   width: 490px;
}

これが機能したら、次のステップは、テンプレートをレスポンシブにするために、％幅と％マージンで再生を開始することです。これにより、サイトを表示しているデバイスの幅に応じてサイトを拡大縮小できます。

幅の合計が100％を超えないように注意してください。超えない場合、列が適切な場所にネストされません。

于 2013-03-14T20:25:10.087 に答える
1

float:left中央の列に追加します。

#center-column {
    float: left;
    margin-left: auto;
    margin-right: auto;
    width: 490px;
}

本当にあなたはfloat:left;すべての列をすべきであり、clear:bothその後

于 2013-03-14T20:25:11.870 に答える