div
それぞれが画像を含む5 つのフローティング の行で構成されるウィジェットを作成しました。HTML の簡略版を次に示します。
<div class="panel">
<img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
<img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
<img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
<img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
<img src="/images/image.jpg" height="160" width="160">
</div>
そして、これは CSS の簡素化されたバージョンです。
.panel {
display: inline-block;
float: left;
height: 160px;
position: relative;
margin: 8px 25px 0 0;
width: 160px;
}
5 つdiv
の はコンテナ (元の幅 940 ピクセル -width: auto
画面幅が 940 ピクセル未満になると変化) に左右のパディング (両側に 20 ピクセル) があります。
div
レスポンシブ スタイルシートを作成するためにメディア クエリを使用しましたが、幅が縮小されたときにフローティング s を画面に合わせたいと考えています。
どうすればこれができるか知っている人はいますか?