css - 三列 DIV - 是否需要嵌套？

Question

我有一个关于三列 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 元素嵌套在另一个容器中？ 使用我现在使用的方法有什么缺点吗？

据我所知...没有任何问题，但想听听社区的意见，我是否会遇到一些麻烦。

Answer 1

我必须同意 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 .