web-dev-qa-db-ja.com

CSSでdisplay：inline-blockとfloat：leftを使用する利点

通常、行に複数のDIVsを含める場合はfloat: leftを使用しますが、今ではdisplay:inline-blockのトリックを発見しました

リンク例 here 。 display:inline-blockはalignDIVsを連続して実行するより良い方法のようですが、欠点はありますか？このアプローチがfloatトリックよりも人気がないのはなぜですか？

csscss3css-floathtml
113
Ryan

3語で：inline-blockの方が優れています。

インラインブロック

display: inline-blockアプローチの唯一の欠点は、IE7以前では、デフォルトで既にinlineであった場合にのみ要素をinline-blockで表示できることです。つまり、<div>要素を使用する代わりに、<span>要素を使用する必要があります。意味的に<div>はページを分割するためのものであるのに対し、<span>はページのスパンをカバーするためのものであり、大きな意味の違いはないため、これはまったく大きな欠点ではありません。 display:inline-blockの大きな利点は、他の開発者が後でコードを保守しているときに、display:inline-blockまたはtext-align:rightステートメントよりもfloat:leftとfloat:rightが何を達成しようとしているのかが明らかになることです。 inline-blockアプローチの私のお気に入りの利点は、vertical-align: middle、line-height、およびtext-align: centerを使用して、直感的に要素を完全に中央に配置できることです。 Mozilla blog で、クロスブラウザインラインブロックの実装方法に関する素晴らしいブログ投稿を見つけました。 ブラウザの互換性 は次のとおりです。

フロート

floatメソッドの使用がページのレイアウトに適していない理由は、float CSSプロパティ 元は画像（雑誌スタイル）をテキストで囲むことのみを目的としていた であり、設計ではなく、一般的なページレイアウトの目的に最適です。後でフロート要素を変更するとき、 ページフローにない であるため、位置の問題が発生することがあります。別の欠点は、一般にclearfixが必要であるということです。 clearfixでは、フロートされた要素の後に要素を追加して、要素を 親が崩壊する を停止する必要があります。これは、スタイルをコンテンツから分離するセマンティックラインと交差するため、 Web開発のアンチパターン 。

上記のリンクで言及されている空白の問題は、white-space CSSプロパティで簡単に修正できます。

編集：

SitePoint は、Webデザインのアドバイスの非常に信頼できるソースであり、私と同じ意見を持っているようです。

CSSレイアウトを初めて使用する場合は、想像力に富んだ方法でCSSフロートを使用することがスキルの高さだと考えることは許されます。見つけられる限り多くのCSSレイアウトチュートリアルを使用している場合、フロートの習得は通過儀礼であると思われるかもしれません。創意工夫に驚かされ、複雑さに驚かされます。フロートがどのように機能するかを最終的に理解すると、達成感が得られます。

だまされてはいけません。あなたは洗脳されています。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015アップデート-Flexboxは、 最新のブラウザの代替として適しています：

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

詳細

2016年12月21日更新

ブートストラップ4はIE9のサポートを削除しているため、行からフロートを取り除き、フルFlexboxを使用しています。

プルリクエスト＃21389

146
Alex W

一般にinline-blockの方が優れていることに同意しますが、考慮すべき点が1つありますパーセント幅を使用している場合レスポンシブグリッドを作成する場合（またはピクセル単位の完璧な幅が必要な場合）：

合計が100％またはほぼ100％の幅のグリッドにinline-blockを使用している場合、HTMLマークアップに列間に空白がないが含まれていることを確認する必要があります。

フロートでは、これは心配する必要はありません。列は空白や列間の他のコンテンツの上に浮かんでいます。 この質問の回答には、コードをくせずにHTMLの空白を削除する方法に関するいくつかの良いヒントがあります 。

何らかの理由でHTMLマークアップを制御できない場合（制限的なCMSなど）、ここで説明するトリックを試すか、インラインブロックの代わりにフロートを妥協して使用する必要がある場合があります。 _font-size:0;を列コンテナーに適用してから、各列内にフォントサイズを再適用する のような極端な状況でのみ使用するべきCSSいCSSトリックもあります。

例えば：

22
user568458

divをピクセル単位で正確に揃えるには、floatを使用します。 inline-blockは常に（少なくともIEでは）数ピクセルを切り取る必要があるようです

4
Vins

深さで答えを見つけることができます こちら 。

ただし、一般的にfloatを使用する場合は、周囲の要素とinline-blockの要素を並べる簡単な方法に注意して注意する必要があります。

ありがとう

1
abhijit

ただし、インラインブロックには、簡単ではない特性が1つあります。つまり、CSSのvertical-alignのデフォルト値はベースラインです。これにより、予期しないアライメント動作が発生する場合があります。この記事をご覧ください。

http://www.brunildo.org/test/inline-block.html

代わりに、float：leftを実行すると、divは互いに独立しており、マージンを使用して簡単に位置合わせできます。

1
Sydney