0

我有一个简单的布局，带有一个固定的左侧导航和一个居中的页面，现在在低分辨率下固定导航的问题是在我想要阻止的内容区域上进行竞争，但我无法这样做。

演示

知道如何让我的页面居中，甚至在屏幕分辨率较低时使用 div 固定在它旁边而不重叠我的元素

无论分辨率如何，我想要的都是这样，页面应该居中，但导航应该位于页面旁边并且不应该与页面重叠

在此处输入图像描述

CSS

.page_wrapper {
    min-width: 750px;
    max-width: 750px;
    margin: 20px auto;
    border: 1px solid #ff0000;
}

.content_wrapper {
  margin: auto;
  max-width: 700px;
  margin-left: 120px;
}

p,
ul {
  margin: 0;
  padding: 0;
}
p {
  margin-bottom: 20px;
}
#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}

.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}

​</p>

4

5 回答 5

2

据我所知，您在#nav 上的“left”属性导致它始终位于距左边距 300px 的位置。删除使左侧导航保持在左侧（而不是距离左侧 300 像素）。

代替：

#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}

尝试

#nav {
  list-style: none;
  position: fixed;
  top: 20px;
}

有关更多信息，请参阅W3 Schools Left Property。

回应您的评论“这将使位置导航在页面的最左侧流动”：

添加margin-left:20px;属性

于 2012-10-25T18:23:01.780 回答
2

这可以通过

#nav {
    padding-left:20px;  
    padding-top:30px;
  list-style: none;
  position: fixed;
  top: 20px;
}

现场小提琴

于 2012-10-28T06:38:45.217 回答
1

我为您制作了一个示例小提琴，您只需要一个包装器 div 和一个向右浮动的内容 div

演示

我已经更改了一些容器 div 布局，基本上你可以将容器中的内容包装起来

HTML

<div class="main_container">
   <nav class="content_navigation">
      <ul id="nav">
          <li class="current"><a href="#section-1">Section 1</a></li>
          <li><a href="#section-2">Section 2</a></li>
           <li><a href="#section-3">Section 3</a></li>
           <li><a href="#section-4">Section 4</a></li>
           <li><a href="#section-5">Section 5</a></li>
       </ul>
   </nav>
   <div class="right_content">
   <div class="section" id="section-1">
      <strong>Section 1</strong>
    </div>
    <div class="section" id="section-2">
       <strong>Section 2</strong>
    </div>
    <div class="section" id="section-3">
       <strong>Section 3</strong>
    </div>
    <div class="section" id="section-4">
       <strong>Section 4</strong>
    </div>
    <div class="section" id="section-5">
        <strong>Section 5</strong>
    </div>
  </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
.main_container {
    width: 900px;
    min-width: 900px;
    margin: 0 auto;
    background: #ffffff;
}
.content_navigation {
    width: 205px;
    position: fixed;
    margin-top: 120px;
}
.right_content {
    float: right;
    width: 675px;
    border-left: 1px solid #252525;
    margin-top: 25px;
}
#nav {
  list-style: none;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}
.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}
于 2012-10-28T06:56:33.303 回答
0

left: 50%与否定left-margin一起使用#nav从中间定位

jsfiddle

#nav {
  left: 50%;
  margin-left:-350px;
  ...
}
于 2012-10-25T18:52:25.773 回答
0

我试图做一些类似于你在图中的东西，使#nav绝对定位 wrt .left_navigation。还删除了边距，.content_wrapper因为它似乎没有用。

.content_wrapper {
  /*margin-left: 120px;*/
}
#nav {
  left:-77px;
  width:76px;
  list-style: none;
  position: absolute;
  top: -1px;
}
.left_navigation{
    position:relative;
}

演示

于 2012-10-28T06:57:54.673 回答