我有3个div:页面顶部的横幅(想像Facebook,Twitter,甚至Stackoverflow),该横幅上的搜索栏,以及位于页面下方的正文。
我希望将搜索栏放置在横幅的顶部,而主体直接位于下方,而没有空白,即搜索栏漂浮而主体没有,就像这样:
+-----------------------------+
| +-----------+ | <-- banner with search bar within
| +-----------+ |
+--+-----------------------+--+
| | <-- main body of page
| |
| |
| |
| |
| |
+-----------------------+
最佳答案
<!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>
关于css - CSS定位情况,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6844661/