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。

三列DIV - 需要嵌套吗？

1 个答案: