Question

我觉得创建像这样具有良好语义的布局很尴尬。

左侧是一个大约150像素宽的列，其中包含导航元素。

我想将网站的这一部分的HTML放在HTML代码的开头，然后有一个简单的方法来强制页面的其余部分不要侵占左边的那个区域（150像素列）。

我考虑过一些选择。

将其余网站内容放在显式左边距为150px的div中。
将nav元素设置为宽度150px并向左浮动。页面的其余部分自然包装。

还有其他更适合此任务的选项吗？

这是缺点。

现在将导航元素更改为200px需要我将另一个div的左边距编辑为200px。当然，这对于一次性布局更改来说并不算太糟糕，但如果我将nav元素的宽度从脚本中动态更改怎么办？我需要脚本也改变div的边距。
如果nav元素设置为position：fixed（并占据页面的整个左列），则页面的其余部分不能容纳其现在静止的行为，并且在页面滚动时看起来很糟糕。要解决这个问题，我需要让nav元素无限高度。我不确定如何以正确的方式做到这一点。 height:9999999px;？这使我的页面高1000万像素，滚动条现在没用了。

Answer 1

创建侧栏：

<!-- html -->
<nav role="main">
  <a href="link.com">link</a>
</nav>

//css
nav{    
  width: 150px;
  float: left;
  display: inline;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}

然后为主要内容创建容器

<!-- html -->
<section id="main">
  main content in here
</section>

//css
section#main{
  width: 500;
  float: left;
  margin: 0;
  padding: 0;
  display: inline;     
}

只要您在源代码中部分之前放置导航，部分中的任何内容都会远离左侧列，不会包裹在它下面。

只需要确保你重置所有的css，特别是填充，边距和边框，除非你知道你在做什么

祝你好运

Answer 2

我一直使用选项1，但如果有其他想法，我很乐意听到它们。

Answer 3

很少有关于“缺点”的建议：

如果您厌倦了始终使用相同的值更改两个属性，请考虑使用CSS生成工具，如LCSS，SASS。
如果我没记错的话，不要为左侧边栏设置height: 999999px，而是存在一些像这样的技巧：http://www.ejeliot.com/blog/61

HTML / CSS：页面左侧的导航栏

3 个答案: