私は現在、いろいろなことをしながら「レスポンス」トップバーを作成するのが難しいです。レスポンシブな「トップバー」を作成する
私は標準的なラップトップサイズのディスプレイを使用すると正常に作成されていますが、画面サイズをモバイルサイズに変更しようとすると、コンテンツをビュー。
私は現在、例として2つのdivを使用しています。 top-bar-holder
はコンテナdivで、内容を一定の最大幅に保つためにtop-bar
が使用されています。
私は、この例ではそれぞれのイメージを使った2つのタプルテーブルも使用しました。問題は、画面上に留まる代わりに、画像が左に消えていくビューポートのサイズを変更しようとすることによって確認できます。
私はより良い説明のためにフィドルを添付しました。
私はこの質問で十分に詳述されていないかどうか尋ねてください。
.top-bar-holder {
position:fixed;
\t width:100%;
\t height:70px;
\t background-color:#384452;
z-index:1;
}
.top-bar {
position:relative;
max-width:1100px;
width:100%;
border:1px solid orange;
height:70px;
left:50%;
margin-left:-550px;
}
.top-bar table tr th {
border:1px solid green;
height:65px;
max-width:50%;
}
<div class="top-bar-holder">
\t \t \t <div class="top-bar">
\t \t \t \t <table style="width:100%">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th> <img src="company-logo.png" width:"120" height="55" /> </th>
\t \t \t \t \t \t <th> <img src="company-logo.png" width:"120" height="55" /> </th>
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t </div>
\t \t </div>