0

我有一个关于三列 DIV 布局的一般性问题。

从我在网上阅读的内容来看，一种常见的做法似乎是这样的：

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

基本上，两列总是嵌套在第二个容器中。但是，我有一些看起来像这样的代码，它似乎工作得很好。

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

所以，我的问题是：

是否有理由需要将每两个 DIV 元素嵌套在另一个容器中？使用我现在使用的方法有什么缺点吗？

据我所知……这并没有什么问题，但想听听社区的意见，我是否会遇到一些麻烦。

4

1 回答 1

1

我必须同意 Niels Keurentjes 提供的评论，没有理由不“允许”这样做。对于某些（响应式）设计，将更多 div 包装在一个中可能会很有用。

您提供的代码也可以进行优化，删除容器 div 并使用您的 body 作为包装器：

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 回答