浮動不對齊元素互相

Question

現場的臨時線路旁：http://www.tajrediat.com/test/

快照：

紅色名字所代表的類。

我希望我的表單能夠在/在白框內。我可以使用margin-right和margin-top將它放入框中，但有沒有一種實際的方法可以通過社交媒體部分來浮動窗體？

HTML：

<div class="container"> 
     <header> 
      <div class="logo"> 
      </div> 
      <nav> 
       <ul> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
       </ul> 
      </nav> 

      <div class="mainbanner"> 

      </div> 
      <div class="loginbox"> 
       <form> 
        <ul> 
         <li> 
          <label>Username</label> 
          <input type="text"/> 
         </li> 
         <li> 
          <label>Password</label> 
          <input type="password"/> 
         </li> 
         <li> 
          <input type="checkbox"/> 
          <label>Remember me?</label> 
         </li> 
         <li> 
          <input type="submit" value="Login"/> 
         </li> 
        </ul> 
       </form> 
      </div> 
      <div class"socialmedia"> 
       <!-- tweeter--> 
       <!-- facebook --> 
       <!-- googleplus --> 
      </div> 
     </header> 
    </div> 

CSS：

.container { 
    width: 980px; 
    margin: 0 auto; 
} 

.logo { 
    float: right; 
} 

nav { 
    float: right; 
} 

nav ul li { 
    display: inline; 
    padding-right: 13px;  
} 

.mainbanner { 
    float: right; 
    margin-top: 10px; 
    margin-right: 20px; 
} 

.socialmedia { 

} 

.loginbox { 
    height: 182px; 
    background: url(../images/loginbox.png) no-repeat; 
} 

.loginbox form { 
width: 100px; 
} 

.loginbox form ul{ 

} 

如果刪除了寬度出來.loginbox形式的，形式會混亂爲：

任何想法如何漂浮在上述部分旁邊的形式，由白框？

Answer 1

您需要給loginbox div和socialmedia指定寬度，比如50％，否則它將佔用100％的寬度。 還要確保您清除漂浮

你的CSS應該像下面

.loginbox, .socialmedia 
{ 
    float:left; 
    width:50%; 
} 
.clear 
{ 
    clear:both 
} 

添加同級股利loginbox和社會化媒體的div和「清晰」的CSS類添加到這個新的div

Answer 2

你需要添加float：right;到.loginbox（如果你希望它旁邊的其他），並給它一個小於剩餘空間的寬度。添加一個明確的新的div：兩個;在那之下。