129

通常、複数DIVsを連続させたい場合は を使用しますfloat: leftが、今では次のトリックを発見しました。display:inline-block

ここにリンクの例。連続display:inline-blockする方が良いように思えますが、何か欠点はありますか？このアプローチがトリックalign DIVsよりも人気がないのはなぜですか?float

4

5 に答える 5

160

3つの言葉で：inline-blockより良いです。

インライン ブロック

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

浮く

このfloatメソッドの使用がページのレイアウトに適していない理由は、floatCSS プロパティがもともと画像 (雑誌スタイル) の周りにテキストを折り返すことのみを目的としており、設計上、一般的なページ レイアウトの目的には最適ではないためです。フローティング要素を後で変更すると、ページ フローに含まれていないため、配置の問題が発生することがあります。もう 1 つの欠点は、通常、clearfix が必要になることです。そうしないと、ページの一部が破損する可能性があります。clearfix では、float 要素の後に要素を追加して、親要素が要素の周りで崩壊するのを防ぐ必要があります。これは、スタイルとコンテンツを分離するセマンティック ラインを越えるため、Web 開発におけるアンチパターンです。

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

編集：

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

CSS レイアウトに慣れていない場合は、想像力に富んだ方法で CSS フロートを使用することがスキルの高さであると考えるのは許されます。CSS レイアウトのチュートリアルをできるだけ多く読んだことがあれば、float をマスターすることは通過儀礼だと思うかもしれません。その巧妙さに目がくらみ、その複雑さに驚嘆し、フロートのしくみをようやく理解したときの達成感を得ることができます。

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

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日更新

Bootstrap 4 は IE9 のサポートを削除しているため、行からフロートを取り除き、完全な Flexbox に移行しています。

プルリクエスト #21389

于 2013-03-02T18:27:39.180 に答える
24

一般的には優れていることに同意しますが、パーセンテージ幅を使用してレスポンシブ グリッドを作成している場合 (またはピクセル単位の幅が必要な場合)はinline-block、考慮すべき追加事項が 1 つあります。

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

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

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

例えば：

于 2015-04-28T15:38:02.353 に答える
4

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

于 2014-01-17T03:45:37.320 に答える
2

ここで詳細な回答を見つけることができます。

しかし、一般的には、周囲の要素と要素を並べる簡単な方法をfloat認識して世話をする必要があります.inline-block

ありがとう

于 2013-03-02T08:55:38.877 に答える
1

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

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

代わりに、float:left を実行すると、div は互いに独立しているため、margin を使用して簡単に配置できます。

于 2016-06-20T17:42:36.163 に答える