浮動浮動元素

Question

我有兩個div包含在一個更大的div內，我希望它們彼此相鄰。我的方法是浮動左邊的第一個div，並在包含div上設置Overflow：hidden。 出於某種原因，它不工作，第二個div結束了第一個。

Herse是演示，http://jsfiddle.net/9xmDP/。我使用了一些顏色編碼來嘗試和調試重疊。代碼也在下面。註冊表單應位於登錄表單的旁邊，而不是頂部。

HTML

<div id="container">  
<div id="signupDiv"> 
    <div id="signupLabel"> 
     SignUp 
    </div> 
    <form id="signupForm"> 
     User <input type="text" name="user"><BR/> 
    </form> 
</div> 

<div id="loginDiv"> 
    <div id="loginLabel"> 
      Login 
    </div>    
    <form id="loginForm"> 
     User <input type="text" name="user"><BR/> 
    </form> 
</div> 

CSS

#container{ 
    overflow: hidden; 
} 

#signupLabel{ 
    border: solid black 1px; 
    width: 300px; 
} 

#signupDiv{ 
    float:left; 
} 

#loginLabel{ 
    border: solid red 1px; 
    width: 300px; 
    } 

#loginDiv{ 
    width: 300px; 
    border: solid pink 1px; 
} 

Answer 1

試試這個css。小提琴here

#container{ 
width:604px; 
} 

#signupLabel{ 
border: solid black 1px; 
width: 300px; 
} 

#signupDiv{ 
float:left; 
width:300px; 
} 

#loginLabel{ 
border: solid red 1px; 
width: 300px; 
} 

#loginDiv{ 
width: 300px; 
float:left; 
border: solid pink 1px; 
} 

Answer 2

你需要float:left#loginDiv爲好。在這裏看到更新後的提琴：

http://jsfiddle.net/9xmDP/2/

Answer 3

當你漂浮的元素，它是從正常的內容流中除去，並在它的父元素和家長的其他孩子嘗試任何內容，它周圍包裹。

因此，signupDiv的確浮到左邊，這使得它位於非浮動的頂部loginDiv。 loginDiv中的內容確實試圖圍繞signupDiv，但由於您已將這兩個元素都指定爲300px寬，因此它沒有空間，因此它必須改爲而不是而不是浮動div。

最簡單的辦法是浮動兩個的div，像這樣：

#signupDiv, #loginDiv { 
    float: left; 
} 

Answer 4

您可以將彼此相鄰的div，使它們既浮動。 如果使容器605px，那麼div一定適合在那裏（包括邊框）

#container{ 
    width: 605px; 
    overflow: hidden; 
} 

這

#loginDiv{ 
    float: left; 
    width: 300px; 
    border: solid pink 1px; 
} 

Answer 5

Diplay：內聯也將在這裏做的伎倆.. http://jsfiddle.net/9xmDP/4/

#loginDiv{ 
width: 300px; 
border: solid pink 1px; 
display:inline-block; 
}