1

レスポンシブデザインで、順序付けされていない画像のリストがあります。ウィンドウのサイズを変更すると、画像が適切にスケーリングされます。しかし、問題は画像の高さに応じて高さを調整しないラッパー UL 要素です。これにより、P要素に続く前に大きなギャブが作成されます。

http://jsfiddle.net/6qrad/1/

ulfloatせずにそれに応じて調整する要素の高さを達成するにはどうすればよいですかli。

4

1 に答える 1

3

まず、レスポンシブ デザインを使用する場合は、必ず以下のスニペットを使用してください。

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

CSS ボックスモデルを認識している場合、上記はそれと正反対のことを行い、要素の代わりに要素内のpadding,をカウントします。borderoutside

ソリューションに来て、あなたはcolumn-countあなたのケースでは必要ないと思うプロパティを使用しています。単に使用して、フローティングをクリアするfloat: left;よりも使用できますoverflow: hidden;li

デモ

font-size: 0;底に残ったピンク色の部分を取り除きたい場合に使用します。(width: 33.33%正確には、右側のピンク色も削除されます。)

デモ 2 (ギャップあり、中古padding)

また、質問を編集していたときに、したくないと言ったfloatので、そうしない具体的な理由はわかりませんが、フロートしたくない場合は、で使用できdisplay: inline-block;ますそれぞれにwidth設定し、要素を作成して を処理するために33%使用することも確認してくださいmargin-left: -4px;white-spaceliinline-block

于 2013-09-16T08:20:07.853 に答える