1

我想创建一个非常简单的带有 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）标题，导航，...中的内部div是否必要？它们在那里是因为我可以在不改变元素宽度的情况下更改填充、边距和边框。我是否应该在每次更改时设置此宽度？

4

4 回答 4

2

1）是否需要容器 div 很大程度上取决于您的实际设计，但是从您所展示的内容中我可以看出，这并不是必需的。什么是身体物质？

2）你自己回答了你的问题。如果您想防止由于填充，边距，边框而溢出，请保留它。

于 2012-10-16T12:24:18.417 回答
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;
}
​

看看这里

编辑：

  • body 是高级容器，它包含所有传递给视图的元素。有时我们需要在页面中定位或形成我们的整个元素，而不改变每个元素相互比较的位置。所以作为一个称为容器的元素可能很有用。
于 2012-10-16T12:31:18.610 回答
0
  1. 是的，你可以用你的身体作为你的容器。
  2. 只要您box-sizing: border-box;在此处使用更多信息，您就可以摆脱您的内部 div-s：http: //css-tricks.com/box-sizing/
于 2012-10-16T12:23:58.297 回答
0

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

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>
于 2012-10-16T12:55:47.253 回答