爲什麼DIV被推到下面而不是在旁邊？

Question

我試圖製作一個「滑出」div，當它懸停在它上面時滑出。我想要發生的是我想讓左邊的div將右邊的div推開，但不是低於div，而是右邊。 有誰知道爲什麼會發生這種情況？

這裏是我的腳本：

.container { 
    width: 796px; 
    background-color: yellow; 
    overflow:hidden; 
} 
.left { 
    display:none; 
    float: left; 
    width: 256px; 
    background: green; 
} 
.right { 
    float: right; 
    width: 796px; 
    height: 100%; 
    background-color: red; 
} 

Here is a live demo 點擊 '顏色框'，然後選擇 '顯示左格'。

謝謝大家！ :)）））

Answer 1

假設您的.left和.right在.container之內，被推倒的原因是因爲沒有足夠的空間。

您已設置爲.container等孩子即.left和.right需要加起來796px一個width:796px。目前他們加起來爲1052px，所以他們中的一個被推倒了，因爲他們不能並排放在一起。

編輯：使用內容器方法在我的評論中提到和@ Matteo的答案中提到你需要調整下面的CSS。

.inner_container{ 
    width: 1396px; /* changed from 1052px */ 
} 
.right { 
    background-color: red; 
    float: left; /* changed from right */ 
    height: 100%; 
    width: 796px; 
} 

它需要1396px是因爲它需要足夠大，當.left擴展到600px是.right在769px仍然可以適應它旁邊的原因。然後更改爲float:left是必要的，以便.left和.right之間沒有間隙，並且在側向推動時它仍保持可見。

Answer 2

在.container內部添加另一個div，其寬度足以容納.left和.right。

http://jsfiddle.net/DRnRQ/

CSS：

.container { 
    width: 796px; 
    height: 300px; 
    background-color: yellow; 
    overflow:hidden; 
} 
.left { 
    float: left; 
    width: 256px; 
    background: green; 
} 
.right { 
    float: right; 
    width: 796px; 
    height: 100%; 
    background-color: red; 
} 
.inner_container { 
    width: 1052px; 
} 

MARKUP：

<div class="container"> 
    <div class="inner_container"> 
     <div class="left">a</div> 
     <div class="right">b</div> 
    </div> 
</div>