CSS定位情況

我有3個div：在我的頁面頂部（認爲Facebook，Twitter或甚至Stackoverflow）的旗幟，該旗幟上的搜索欄以及底部主頁內容的主體。CSS定位情況

我希望定位在與身體正下方的橫幅頂部的搜索欄，而不即搜索欄浮動保證金和身體不適，像這樣：

+-----------------------------+ 
|  +-----------+  | <-- banner with search bar within 
|  +-----------+  | 
+--+-----------------------+--+ 
    |      | <-- main body of page 
    |      | 
    |      | 
    |      | 
    |      | 
    |      | 
    +-----------------------+

來源

2011-07-27 Sebastian

用jsfiddle.net顯示你的代碼 –

<!DOCTYPE html> 
<html> 
<head> 
<title>SO</title> 
<style type="text/css"> 
div#banner { 
    background: #aabbcc; 
} 

div#search, div#main { 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid gray; 
} 

div#search { 
    width: 20%; 
} 

div#main { 
    width: 80%; 
} 
</style> 
</head> 
<body> 
<div id="banner"> 
    <div id="search"> 
     Search 
    </div> 
</div> 
<div id="main"> 
    Main 
</div> 
</body> 
</html>

來源

2011-07-27 13:04:22

<html> 
    <style type="text/css"> 

    #banner { 
     height:100px; 
     position:relative; 
    } 

    #search-bar-container { 
     position:absolute; 
     top:0px; 
     left:0px; 
     width:100%; 
     height:100%; 
    }  

    #search-bar{ 
     height:50px; 
     margin:10px auto; /*center the search bar*/ 
     width:200px; 
    } 

    #page-body { 
     width:900px; 
     margin:0 auto; 
     min-height:500px; 
    } 

    </style> 
    <body> 
    <div id="banner"> 
    <div id="search-bar-container"> 
     <div id="search-bar"> 
     <input type="search" name="txt_search" /> 
     </div> 
    </div> 
    </div> 
    </body> 
</html>

來源

2011-07-27 13:03:27

回答

相關問題