Question

我的内容文字显示在内容div下。在div中，我已经浮动了div块，其中包含带链接的菜单内容。

问题是我的内容文本显示在菜单div块下面，我想强制内容文本打破周围的菜单块。

#content {
    display: inline;
    float: left;
    height: auto;
    margin-top: 0;
    padding: 5px;
    width: 570px;    
}
#content .subLinks {
    background-color:gray;
    border: 1px solid black;
    height: auto;
    margin-left: 330px;
    margin-top: 60px;
    padding: 10px;
    position: absolute;
    width: 220px;
}

<div id="content">                    
    <div class="subLinks">
    <ul class="subLinksMenu">
        <li><a title="LinkOne" href="/">LinkOne</a></li>
        <li><a title="LinkTwo" href="/">LinkTwo</a></li>            
        </ul>
    </div>                    
    <h1>Lorem ipsum dolor sit amet</h1>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>

Answer 1

非常混乱的CSS，将逐点采用，如果你不在乎阅读，这里有demo给你

1）position: absolute;在这里是罪魁祸首，当你使用position: absolute;时，div会从文档流中流出，因此你的div不知道如何绕过这个框。

2）为什么一起使用display: inline;和float: left;？

3）使用显式边距，不是必需的！

4）始终将文本包装在元素中，说p表示语义，它说是，文本是段落

Easy Example

Answer 2

我建议您将subLinks向右浮动。这将让内容文本环绕它：

#content .subLinks {
    background-color:gray;
    border: 1px solid black;
    padding: 10px;
    margin:0px 0px 15px 15px;
    position: relative;
    float:right;
}

http://jsfiddle.net/qYcWc/2/

Answer 3

更新了小提琴：http://jsfiddle.net/qYcWc/5/

尝试简化您的解决方案：

#content {
    height: auto;
    margin-top: 0;
    padding: 5px;
    width: 570px;
}

.subLinks {
    border: 1px solid black;
    height: auto;
    padding: 10px;
    width: 220px;
    float: left;
    margin: 0 5px 0 0;
}

内容文本显示在css块下而不是环绕

3 个答案: