Question

我试图让我的导航栏位于容器div（和标题img）的左侧，而不必按像素定位（如codepen中所示：http://cdpn.io/Bfkzx）。我希望设计能够响应流动，所以我想把主要的div（容器/标题img）放在中心，让导航器挂在左边，但我没有运气实现这一目标。

谢谢！

Answer 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的上边距以将其降低。

Answer 2

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

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

display:table

如何让导航栏浮动到容器div的左侧而没有绝对定位

2 个答案: