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

Question

我的内容文本显示在内容 div 下。在那个 div 中，我有 float 的 div block ，其中包含带链接的菜单内容。

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

活生生的例子是嘻嘻 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，会逐点解释，如果你不喜欢看，这里有一个demo为你

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

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

3) 使用明确的边距，不是必需的!

4) 始终将文本包裹在一个元素内，对语义说p，它说是的，文本是一个段落

Easy Example