我有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/

10-13 01:08
查看更多