三列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 - 是否需要嵌套？

回答

相关问题