1

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 を画面に合わせたいと考えています。

どうすればこれができるか知っている人はいますか？

4

3 に答える 3

0

何を探しているのかわかりませんがcalc()、すべてを処理するには を使用するのが最善の方法かもしれません。

.panel {
  float: left;
  height: 160px;
  width: calc(20% - 25px);
  margin: 8px 25px 0 0;  
}

デフォルト以外の位置は必要ありませんstatic。inline-blockまた、ブロック要素のようになるため、要素をフロートするときに表示を設定しても意味がありません。

コンテナの場合、次のようなことをするかもしれません：

.container {
  width: 940px;
  max-width: 100%;
}

なのでレスポンシブな物になります。

calc()ここで互換性を確認できます: http://caniuse.com/calc

于 2013-06-06T10:36:59.807 に答える
0 
@media (max-width: 767px) {
.leftdiv {
width:100%!important;
height:100%!important;
margin-left:auto;
margin-right:auto;
}
.right-div {
width: 100%!important;
margin-left: 0!important;
height:100%!important;
}
}
于 2013-08-14T09:12:04.667 に答える
0

コンテナdivに fixed が指定されている場合width、ページは応答できません。これを a に変更するmax-widthか、 width プロパティを完全に削除すると、パネルが折り返されます。

于 2013-06-06T10:35:40.063 に答える