创建两列布局 - html/css 语义答案

【问题标题】：Creating two columns layout - html/css semantics创建两列布局 - html/css 语义
【发布时间】：2012-10-06 13:05:15
【问题描述】：

我想创建一个非常简单的 2 列流式布局 - 左侧的一列将具有固定宽度，而右侧的一列将取决于窗口大小。

布局将包含 4 个元素 - 页眉、导航、内容和页脚。

根据 HTML5 元素的语义，我有几个问题。

这是代码：

<body>
   <div id="container">
       <header>
          <div id="header">
             sadfsdf
          </div>
       </header>
       <nav>
          <div id="nav">
             gdfsgf
          </div>
       </nav>
       <article>
          <div id="article">
             gdffgdg
          </div>
       </article>
       <footer>
          <div id="footer">
             gdfsgf
          </div>   
       </footer>
   </div>
</body>

1) 容器 div 真的有必要吗？我要做的是： HTML 具有字体/线高属性 BODY 有一些边距和背景图片 CONTAINER 包含其余部分

可以吗？把body的东西放在html里面，把body变成容器？

2) header, nav, ... 中的内部 div 是否必要？它们在那里是因为我可以在不改变元素宽度的情况下更改填充、边距和边框。我是否应该在每次更改时设置此宽度？

【问题讨论】：

标签： css html semantics

【解决方案1】：

1) 是否需要容器 div 在很大程度上取决于您的实际设计，但从我所展示的内容来看，这并不是真正需要的。什么是身体的东西？

2) 你自己回答了你的问题。如果你想防止因为 padding、margin、border 而溢出，请保留它。

【讨论】：

Div#container 仅用于在达到最大宽度时在网站中间居中。这就是为什么我想让身体这样做。这会影响什么吗？（如果我要为其添加任何固定宽度）。并且根据 2)...这些内部 div 是否有任何语义 HTML5 元素？也许部分？还是咏叹调角色？
居中不需要容器。您可以将 html 的宽度设置为 100%，然后将正文的最大宽度设置为您想要的任何值，将宽度设置为 100% 并将正文居中。据我所知，HTML5 中没有用于内部 div 的特殊语义元素。

【解决方案2】：

在布局中有两列或多列的最佳方法是：

浮动 N-1 列
将边距设置为另一个

HTML

<div id="left">LEFT</div>
<div id="right">RIGHT</div>

CSS

div#left{
    float:left;
    width:200px;
    min-height: 400px;
    background-color: magenta;
}
div#right{
    margin-left: 210px;
    min-height: 400px;
    background-color: yellow;
}

看看here

编辑：

body 是高级容器，它包含所有传递给视图的元素。有时我们需要在页面中定位或形成我们的整个元素，而不改变每个元素相互比较的位置。所以作为一个叫做容器的元素可能很有用。

【讨论】：

谢谢，但这不是我想要的。

【解决方案3】：

是的，您可以将身体用作容器。
只要你使用box-sizing: border-box;，你就可以摆脱你内心的div-s 更多关于这里：http://css-tricks.com/box-sizing/

【讨论】：

只有在不需要支持 IE 6 和 7 时才使用 box-sizing
@SvenBieder 你可以看到他已经使用了 HTML 5 标签，没有插件的旧版 IE 不支持这些标签。对于 IE 6 和 7，您始终可以使用 Google Chrome Frame
是的你是对的，没想到他用的HTML5左右。
据我所知，有一些库允许 HTML5 标签在 IE6/7 中工作。

【解决方案4】：

您可以研究的一件事是使用脚手架。

http://twitter.github.com/bootstrap/scaffolding.html 这是来自流体布局部分。虽然它不使用固定跨度，但您可以使用嵌套容器。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

【讨论】：