html - 定位封闭的 div

Question

如何获得一个具有顶部位置的左浮动元素。例如:

.......................
.......................
.......................
menu 1  ...............
menu 2  ...............
menu 3  ...............
.......................
.......................

我使用圆点代替普通文本以使其更清晰。请注意，文本(点)环绕封闭的 div(菜单)。

这是一个开始的 HTML

<div id="section">
    <div id="nav">
      <ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul>
    </div>
................................and so on...
</div>

CSS

div#section {
    width: 600px;
    float left;
}

div#nav {
    float: left;
    width: 200px;
    top: 180px; /* Doesn't work. See below */
}

问题是指定位置 (top:180px) 不起作用，因为 block 在流中。使用 position:relative 将它从流程中取出，将框放在正确的位置，但它随后会与封闭的 div 的文本重叠。

Answer 1

可以使用间隔 div 创建此效果:

<div class="container">
    <div class="spacer"></div>
    <div class="nav">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    </div>
    <!-- Content -->
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

---

.spacer {
    width:1px;
    margin-right:-1px;
    height:2em;
    float:left;  
}

.nav {
    clear:left;
    float:left;
    padding:1em 1em 1em 0; 
}

示例:http://jsfiddle.net/7Q7Fy/