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 {
    padding-left:20px;  
    padding-top:30px;
  list-style: none;
  position: fixed;
  top: 20px;
}

ライブフィドル

于 2012-10-28T06:38:45.217 に答える
2

私が知る限り、#nav の「左」プロパティにより、常に左マージンから 300 ピクセルの位置に配置されます。これを削除すると、左側のナビゲーションが左側に保持されます (左から 300px ではなく)。

それ以外の：

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

試す

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

詳細については、 W3 Schools Left プロパティを参照してください。

「ページの左端に位置ナビゲーションが流れるようになります」というコメントに応えて:

margin-left:20px;プロパティを追加する

于 2012-10-25T18:23:01.780 に答える
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

図にあるものに似たものを作成して、#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 に答える
0

left: 50%ネガで使用して、中央からleft-margin配置します#nav

jsfiddle

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