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 */ }

问题是指定一个位置（顶部：180px）不起作用，因为该块在一个流程中。使用position：relative将它从流中取出，将盒子放在正确的位置，但它会与封闭div的文本重叠。

Answer 1

你有没有尝试过margin-top：180px？似乎应该可以工作，因为我经常在浮动元素上使用边距来确保它边缘的某种沟槽。

Answer 2

使用正margin-top值来改变整个事情：

div#nav {
    margin-top: 180px;
}

应该做的伎俩。

Answer 3

可以使用spacer 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/

Answer 4

如果您剪切“nav”div并将其粘贴到文本的中间，您的代码将按原样运行

<div id="section">
justo sit amet sem dignissim volutpat. Praesent non tellus erat. Pellentesque suscipit ipsum ut arcu pharetra viverra. Vivamus faucibus, libero eget tincidunt iaculis, mauris ligula suscipit ipsum, a tincidunt ipsum nisl non ipsum. Vivamus ullamcorper enim in lacus volutpat venenatis porta tellus tincidunt. Curabitur consectetur enim eget libero placerat vitae egestas 

<div id="nav">
      <ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul>
</div>

justo sit amet sem dignissim volutpat. Praesent non tellus erat. Pellentesque suscipit ipsum ut arcu pharetra viverra. Vivamus faucibus, libero eget tincidunt iaculis, mauris ligula suscipit ipsum, a tincidunt ipsum nisl non ipsum. Vivamus ullamcorper enim in lacus volutpat venenatis porta tellus tincidunt. Curabitur consectetur enim eget libero placerat vitae egestas 
</div>

定位一个封闭的div

4 个答案: