頻繁に発生する繰り返しの問題について助けが必要です。インラインに配置された 3 つのセクションで構成されるヘッダーを作成したいと考えています。次の css コードを使用してインラインで表示します display: inline & float: left
。問題は、ブラウザー ウィンドウのサイズを変更すると、最後の div が押し下げられ、インラインで表示されないことです。うるさいように聞こえるかもしれませんが、訪問者がモニター画面を変更するときにデザインが歪むことは望ましくありません。以下で作業しているhtmlおよびcssコードを以下に提供しました。うまくいけば、私はこれを十分に説明しました。前もって感謝します。
HTML
<div class="masthead-wrapper">
</div>
<div class="searchbar-wrapper">
</div>
<div class="profile-menu-wrapper">
</div>
CSS
#Header {
display: block;
width: 100%;
height: 80px;
background: #C0C0C0;
}
.masthead-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #3b5998;
}
.searchbar-wrapper {
display: inline;
float: left;
width: 560px;
height: 80px;
background: #FF0000;
}
.profile-menu-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #00FF00;
}