HTML/CSS : Nav bars on the left side of page

Question

我发现创建这样具有良好语义的布局很尴尬。

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

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

我考虑过一些选择。

1. 将其余网站内容放在一个 div 中，该 div 的左边距明确为 150 像素。
2. 将导航元素设置为宽度 150 像素并向左浮动。页面的其余部分自然换行。

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

这是缺点。

1. 将 nav 元素更改为 200px 现在需要我将另一个 div 的左边距编辑为 200px。当然，这对于一次性布局更改来说并不算太糟糕，但是如果我让 nav 元素的宽度从脚本动态更改怎么办？我还需要脚本来更改 div 的边距。
2. 如果 nav 元素设置为 position:fixed(并占据页面的整个左栏)，页面的其余部分将无法适应其现在的静止行为，并且在滚动页面时看起来很糟糕。要解决此问题，我需要使导航元素无限高。我不确定如何以正确的方式执行此操作。 高度: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;     
}

只要在源代码中将 nav 放在 section 之前，section 中的任何内容都将远离左手列，不会换行。

只需要确保重置所有 css，尤其是填充、边距和边框，除非您知道自己在做什么

祝你好运