我有 3 个 div:页面顶部的横幅(想想 Facebook、Twitter 甚至 Stackoverflow)、横幅上的搜索栏和下方包含页面主要内容的正文。
我希望将搜索栏放置在横幅的顶部，正文正下方没有边距，即搜索栏 float 而正文不 float ，如下所示:
+-----------------------------+
| +-----------+ | <-- 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定位情况，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6844661/