0

我试图让我的导航栏位于容器 div（和标题 img）的左侧，而不必按像素定位（如代码笔中所示： http ://cdpn.io/Bfkzx ）。我希望设计能够响应式地流动，所以我想将主要 div（容器/标题 img）居中，只是让导航挂在左边，但我没有运气让这种情况发生。

谢谢！

4

2 回答 2

1

您是否必须保持 HTML 结构相同？您可以这样做：

<div class="wrap">
  <div id="nav">
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>

<div id="body">
    <img src="http://placehold.it/600x150" />

    <div id="container">
      <img src="http://placehold.it/600x800" />
    </div>

</div>
</div><!--//end wrap-->

使用 CSS 如下（为了简洁起见，我删除了您的列表样式）：

.wrap { 
  overflow: hidden;
  width: 800px;
  margin: auto auto;
}

#nav { 
  width: 160px;
  float: left;
}

#body {
  width: 80%;
  float: left;
}

您可以调整#nav 的上边距以将其降低。

于 2013-05-14T21:59:43.997 回答
0

我开发了一个例子。我使用了显示表方法。这是一个小提琴

[小提琴][1] http://jsfiddle.net/aleruar/3dq5S

display:table
于 2013-05-14T22:33:52.263 回答