內容文本出現在CSS塊下而不是環繞

Question

我的內容文本顯示在內容div下。在那個div裏面，我已經浮動了帶鏈接的菜單內容的div塊。

問題是我的內容文本出現在菜單div塊下面，我想強制內容文本打破圓形菜單塊。

活生生的例子是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，將就點來看，如果你不小心閱讀，這裏有一個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; 
}