CSS 위치 지정 상황

페이지 상단에 배너 (Facebook, Twitter 또는 Stackoverflow), 해당 배너의 검색 창 및 페이지의 주요 내용이있는 본문이 아래에 3 개 있습니다.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

CSS 위치 지정 상황

답변

관련 문제