水平divs彼此重疊？

我的頁面上有兩個div。第一個是包含徽標圖像和搜索輸入的標題div。第二格是要包含一個水平行，所有我的導航鏈接將被英寸水平divs彼此重疊？

問題是，由於某種原因，第二個div坐在字面上我的第一個DIV的頂部，佔用之間所有空間徽標圖像和搜索框？

這裏有兩個div

<div id="container"> 

     <div id="logo"> 
      <img src="HeaderLogo.jpg" alt="logo"> 
     </div> 

     <div id="searchboxcontainer"> 
      <form action="search.php" method="post"> 
       <input type="text" name="searchterm" id="searchbox"> 
       <input type="submit" name="search" value="Search" id="searchsubmit"> 
      </form> 
     </div> 

    </div> 


    <div id="navbar"> 

    </div>

這裏是我的CSS：

#logo { 

width:30%; 
float:left; 
margin-left:50px; 
} 

#searchboxcontainer { 

background-color:#A3E0FF; 
width:30%; 
float:right; 
margin-right:50px; 
margin-top:60px; 
padding:15px; 
} 

#searchsubmit { 

background-color:#19A3D1; 
} 

#navbar { 

width:100%; 
background-color:#CACABC; 
    height:60px; 
}

來源

2014-03-27 Mikey

普拉Vaichal的解決方案是我在想什麼，但沒有約你想達到什麼清晰的畫面，而是找到一根針在一個非常小的乾草堆.. – Tsasken

@Tsasken一個小乾草堆？ –

@DejaVu嗯，這不是很多代碼，是嗎？：p – Tsasken

申請#navbar{clear:both }可以解決你的問題

旁註：如果你想父母即#container的覆蓋高度你可以申請浮動divs #container{overflow:auto;}

請檢查完整的代碼如下http://jsfiddle.net/2Mh9y/

希望它有幫助！

來源

2014-03-27 09:48:20

檢查這個小提琴，加入

border-box and overflow auto

刪除了一些利潤，並增加了一些墊襯。不知道這是什麼ü想 http://jsfiddle.net/WSaj8/12/

來源

2014-03-27 10:00:38

水平divs彼此重疊？

回答

相關問題