web-dev-qa-db-ja.com

CSS：フロートにまったく新しい行を強制する

たくさんのfloat: left要素がありますが、いくつかは他のものより少し大きいです。改行を解除して、より大きな要素に引っかかるのではなく、画像を左端までフロートさせます。

ここに私が話しているページがあります： link

美しく機能する場合、それらがすべて同じサイズの場合： link

ありがとう！ （私がする必要がない場合、私はむしろJavaScriptまたはサーバー側のスクリプティングに入りません）

htmlcsscss-float
57
Paul Tarjan

float宣言を本当に使用する必要がある場合、2つのオプションがあります。

  1. 左端の項目でclear: leftを使用します-固定列数になるという欠点があります
  2. スクリプトまたはCSSで高さをハードコーディングすることにより、heightでアイテムを等しくする

これらの両方は、フロートがどのように機能するかを回避するため、制限されています。ただし、floatの代わりにdisplay: inline-blockの使用を検討することもできます。これにより、同様のレイアウトが実現します。その後、vertical-alignを使用して配置を調整できます。

83
Alex Gyoshev

float:leftを削除し、代わりにdisplay:inline-blockを追加して修正しました。画像には使用していませんが、うまく機能するはずです。

61
David Davepermen Spörri

つかいます display:inline-block

vertical-align: top または vertical-align:middle便利。

5
optimiertes

これは私がやったことです。新しい行を強制することで動作しているようですが、私はHTML/CSSの第一人者ではありません。

<p>&nbsp;</p>
3
Alex

それらをdivでラップし、divに設定された幅（おそらく最も広い画像の幅+マージン？）を与えてから、divをフロートさせることができます。次に、それらを含むdivの中心に画像を設定します。画像間のマージンは、異なるサイズの画像に対して一貫していませんが、ページ上でよりきれいにレイアウトされます。

2
Evernoob

追加 .icons div {width:160px; height:130px;}は非常にうまく機能します

それが役立つことを願っています

0
Dom

これは古い投稿であり、リンクは有効ではありませんが、検索の早い段階で表示されたため、他の人が問題をよりよく理解できるようにコメントする必要があると考えました。

フロートを使用すると、コントロールを自動的に配置するようブラウザに要求します。コントロールが指定されたフロート配置の幅に収まらない場合、折り返しによって応答します。 float：left、float：rightまたはclear：left、clear：right、clear：both。

したがって、float：leftアイテムの束を1つの左列に均一にフロートさせたい場合は、同じ幅でラップ/アンラップすることをブラウザに決定させる必要があります。スクリプティングを行いたくないので、フロートするすべてのコントロールを1つのdivにラップできます。次のようなクラスで新しいラッピングdivを追加します。

.LeftImages{
    float:left;
}

html

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

このdivは最大の画像の幅に自動的に調整され、すべての画像は常にdivとともに左にフロートされます（ラッピングなし）。

それでも折り返したい場合は、divにwidth：30％のような幅を与え、各画像にfloat：leftを指定できます。スタイル。最大の画像に調整するのではなく、サイズが異なり、含まれる画像をラップできます。

0
codeasaurus