三列DIV - 是否需要嵌套？

從我在線閱讀，一種普遍的做法似乎是這樣的：

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

基本上，兩列是嵌套在第二容器內。不過，我有一些看起來像這樣的代碼，它似乎工作得很好。

jsFiddle Demo

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%; 
}

所以，我的問題是這樣的：

是否有理由需要將每個兩個DIV元素嵌套到另一個容器中？使用我現在使用的方法有什麼不足嗎？

據我所知......沒有任何問題，但想聽聽社區有什麼話，我會遇到一些麻煩。

來源

2013-11-03 Charlie74

除了特定場合的考慮因素以及適合的尺寸之外，兩種解決方案通常是等效的。在某些情況下，嵌套可能是必需的，但這不是一般的'必須或不能做'。 –

說實話我從來沒有見過這個CSS嵌套，我認爲這是沒有必要，但我'，真的很興奮什麼專家在這裏認爲 – xhallix

我必須同意Niels Keurentjes提供的評論，沒有理由不允許這樣做。對於一些（響應式）設計將更多div封裝在一箇中可能會有用。

您提供的還可以優化，丟棄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; 
}

還要檢查該updated Fiddle。

來源

2013-11-03 15:20:10 LinkinTED

謝謝，這是一個很好的觀點。我想這裏真的沒有必要擁有容器DIV。 – Charlie74

三列DIV - 是否需要嵌套？

回答

相關問題