1

2 つの列を持つ非常に単純なリキッド レイアウトを作成したいと考えています。左側の列は幅が固定され、右側の列はウィンドウ サイズに依存します。

レイアウトには、ヘッダー、ナビゲーション、コンテンツ、フッターの 4 つの要素が含まれます。

ここで、HTML5 要素のセマンティクスに従っていくつか質問があります。

これはコードです：

<body>
   <div id="container">
       <header>
          <div id="header">
             sadfsdf
          </div>
       </header>
       <nav>
          <div id="nav">
             gdfsgf
          </div>
       </nav>
       <article>
          <div id="article">
             gdffgdg
          </div>
       </article>
       <footer>
          <div id="footer">
             gdfsgf
          </div>   
       </footer>
   </div>
</body>

1) コンテナ div は本当に必要ですか? HTML には font/lineheight プロパティがあります BODY にはいくつかの余白と背景画像があります CONTAINER には残りが含まれます

body を html の中に入れて body をコンテナにしてもいいですか？

2) ヘッダー、ナビゲーションなどの内部 div は必要ですか? 要素の幅を変更せずにパディング、マージン、ボーダーを変更できるため、それらはそこにあります。変更ごとにこの幅を設定する必要がありますか?

4

4 に答える 4

2

レイアウトに 2 つ以上の列を含める最良の方法は次のとおりです。

  • 列の N-1 を浮動させる
  • マージンをもう一方に設定する

HTML

<div id="left">LEFT</div>
<div id="right">RIGHT</div>
​

CSS

div#left{
    float:left;
    width:200px;
    min-height: 400px;
    background-color: magenta;
}
div#right{
    margin-left: 210px;
    min-height: 400px;
    background-color: yellow;
}
​

ここを見てください

編集：

  • body は、ビューに渡されるすべての要素を含む高レベルのコンテナーです。場合によっては、各要素の位置を互いに比較して変更することなく、ページ内の要素全体を配置または形成する必要があります。そのため、コンテナと呼ばれる要素であると便利です。
于 2012-10-16T12:31:18.610 に答える
2

1）コンテナdivが必要かどうかは、実際の設計に大きく依存しますが、あなたが示したものからわかることから、実際には必要ありません。体の素材とは？

2) あなたはあなた自身の質問に答えました。パディング、マージン、ボーダーによるオーバーフローを防ぎたい場合はそのままにしてください。

于 2012-10-16T12:24:18.417 に答える
0

検討できることの 1 つは、Scaffolding の使用です。

http://twitter.github.com/bootstrap/scaffolding.html これは流動的なレイアウト セクションからのものです。固定スパンは使用しませんが、ネストされたコンテナーを使用できます。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
于 2012-10-16T12:55:47.253 に答える
0
  1. はい、あなたの体を入れ物として使うことができます。
  2. ここでそれについての詳細を使用している限り、内部の div-s を取り除くことができますbox-sizing: border-box;: http://css-tricks.com/box-sizing/
于 2012-10-16T12:23:58.297 に答える