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

Question

我正在尝试让我的导航栏位于容器div (和头img)的左侧，而不必按像素定位它(如这里的代码：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

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

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

display:table