css - 内容文本出现在 css 块下，而不是环绕

Question

我的内容文本显示在内容 div 下。在那个 div 里面，我有浮动的 div 块，其中包含带有链接的菜单内容。

问题是我的内容文本出现在菜单 div 块下，我想强制内容文本打破 arround 菜单块。

现场示例是 heee http://jsfiddle.net/qYcWc/

#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，将逐点介绍，如果你不喜欢阅读，这里有一个演示给你

1)position: absolute;是罪魁祸首，当您使用position: absolute;div 流出文档流时，因此您的 div 不知道环绕框。

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

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

4) 总是将文本包裹在一个元素中，表示p语义，它说是，文本是一个段落

简单的例子

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;
}