0

3 列の DIV レイアウトに関する一般的な質問があります。

私がオンラインで読んだことから、一般的な慣行は次のようなもののようです：

.container {
  .left {
     //content
  }
  .other {
    .center {
      //content
    }
    .right {
      //content
    }
  }
}

基本的に、2 つの列は常に 2 番目のコンテナー内にネストされます。ただし、このようなコードがいくつかあり、問題なく動作しているようです。

jsFiddle デモ

HTML

<div class="container">
    <div class="left">
        Left<br>Content<br>Section
    </div>
    <div class="center">
        Center<br>Content<br>Center<br>Content<br>Center<br>Content
    </div>
    <div class="right">
        Right<br>Content<br>Section
    </div>
</div>

CSS

.container {
    display:inline-block;
    width:100%;
    max-width:800px;
}
.left {
    background-color:#FF6666;
    float:left;
    width:10%;
}
.center {
    background-color:#66FF66;
    float:left;
    width:70%
}
.right {
    background-color:#6666FF;
    float:right;
    width:20%;
}

だから、私の質問はこれです：

別のコンテナー内に 2 つの DIV 要素ごとにネストする必要がある理由はありますか? そして、私が現在使用しているアプローチを使用することの欠点はありますか?

私が知る限り...何も問題はありませんが、コミュニティの意見を聞きたいのですが、今後何らかの問題が発生するのでしょうか.

4

1 に答える 1

1

Niels Keurentjes が提供したコメントに同意する必要があります。これが「許可されていない」理由はありません。一部の (レスポンシブ) デザインでは、複数の div を 1 つにラップすると便利な場合があります。

提供したコードを最適化して、コンテナー div を削除し、ボディをラッパーとして使用することもできます。

HTML:

<div class="left">
    ...
</div>
<div class="center">
    ...
</div>
<div class="right">
    ...
</div>

CSS:

/* delete the .container style */
body {
    width:100%;
    max-width:800px;
}

この更新された Fiddleも確認してください。

于 2013-11-03T15:20:10.157 に答える