1

私は自分のウェブサイトのヘッダーを作っています。ヘッダーに検索ボックスがあり、そのすぐ下に検索結果が表示されます。検索結果のdivの位置を調整したのですが、画面の解像度を変更したらdivが離れてしまいました。私はhtmlに次のコードを持っています:

<div id = "header">
    <div id = "header_wrapper">
        <div id = "search_results">

        </div>
    </div>
</div>

そしてCSSで：

*{
    margin:0px;
}
#header{
    width:100%;
    border:1px solid #f1f1f1;   
    height:100px;
}
#header_wrapper{
    width:1000px;
    margin:auto;
    border:1px solid #f1f1f1;
    height:100px;
}
#search_results{
    position:absolute;
    left:30%;
    height:100px;
    width:500px;
    border:1px solid #f1f1f1;
    top:100px;
}

画面解像度の変更時に親divとの相対位置が変わらないようにdivを調整するにはどうすればよいですか?助けてください

4

1 に答える 1

1

CSSをこれに置き換えるだけで、思い通りに動作することを願っています。

 *{
    margin:0px;
}
#header{
    width:100%;
    height:100px;
}
#header_wrapper{
    width:1000px;
    margin:auto;
    border:1px solid #000;
    height:100px;
    position:relative;
}
#search_results{
    position:absolute;
    left:25%;
    height:100px;
    width:500px;
    border:1px solid #000;
    top:80px;
}
于 2013-08-24T13:04:21.703 に答える