通常、複数を続けたい場合はをDIVs使用しますfloat: leftが、今ではdisplay:inline-block
リンクの例はこちら。その私には思えるdisplay:inline-blockの良い方法であるalign DIVs行ではなく、そこに任意の欠点ですか？このアプローチがfloatトリックほど人気がないのはなぜですか？
回答:
3つの言葉で：inline-blockより良いです。
インラインブロック
このdisplay: inline-blockアプローチの唯一の欠点は、IE7以下では、要素がデフォルトinline-blockですでに表示されている場合にのみ要素を表示できることinlineです。つまり、<div>要素を使用する代わりに、要素を使用する必要があり<span>ます。意味的に<div>はa はページを分割するためのものであり、a <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ブログで、クロスブラウザーインラインブロックの実装方法に関する素晴らしいブログ投稿を見つけました。これがブラウザの互換性です。
浮く
このfloatメソッドの使用がページのレイアウトに適していない理由は、floatCSSプロパティは本来、テキストを画像（雑誌のスタイル）で折り返すことだけを目的としており、設計上、一般的なページレイアウトの目的には最適ではないためです。フローティングエレメントを後で変更する場合、ページフローにないため、配置の問題が発生することがあります。別の欠点は、一般にクリアフィックスが必要になることです。そうしないと、ページの一部が壊れる可能性があります。彼らを停止する要素を浮かべた後、clearfixは、要素を追加する必要が潰れるの親をコンテンツから分離するスタイル間の意味のラインを横切るため、であるそれらの周りのWeb開発におけるアンチパターン。
上記のリンクで言及されている空白の問題は、white-spaceCSSプロパティで簡単に修正できます。
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日更新
Bootstrap 4はIE9のサポートを削除するため、行から浮動小数点数を取り除き、完全なFlexboxに移行します。
letter-spacingは、CSSのどこかでカスタマイズしても壊れないので、少し保守しやすいと思います。
一般的にinline-blockはより良いことに同意しますが、パーセンテージ幅を使用してレスポンシブグリッドを作成している場合（またはピクセルパーフェクトな幅が必要な場合）には、考慮すべき追加の点が1つあります。
inline-block合計100％または100％に近い幅のグリッドに使用している場合は、HTMLマークアップの列間に空白がないことを確認する必要があります。
フロートを使用する場合、これは心配する必要はありません。列は、列間の空白またはその他のコンテンツの上に浮動します。この質問の回答には、コードを醜くすることなくHTMLの空白を削除する方法に関するヒントがいくつかあります。
何らかの理由でHTMLマークアップを制御できない場合（制限付きのCMSなど）、ここで説明するトリックを試すことができます。または、インラインブロックの代わりにフロートを妥協して使用する必要がある場合があります。font-size:0;列コンテナーのように極端な状況でのみ使用する必要がある醜いCSSトリックもあり、各列内にフォントサイズを再適用します。
例えば：
float: left。それは「うまくいく」（ただし、ラッパーをクリアする必要がある場合）。inline-blockです。ブロック間の空白により、固定幅のスペースが作成され、合計幅が100％を超えてレイアウトが崩れ、最後の列が1行下に移動します。inline-blockで、HTMLの列間に空白はありません。それは再び「うまくいく」だけですが、HTMLは醜く、CMSは何らかのHTMLの出力を強制したりインデントしたりして、これを実際に実現することを困難にする可能性があります。div+(whitespace) {display:none}または何かのための可能な回避策はありますか？
<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ？）
あなたが整列する場合はdiv、正確なピクセルで、その後、floatを使用しています。inline-block常に数ピクセルを切り取る必要があるようです（少なくともIEでは）
* {padding:0px; margin:0px; }これは私のコーディングのバランスをとるのに役立つので、常に行ってきました
簡単ではないかもしれませんが、インラインブロックには1つの特徴があります。つまり、CSSのvertical-alignのデフォルト値はベースラインです。これにより、予期しない整列動作が発生する可能性があります。この記事を見てください。
http://www.brunildo.org/test/inline-block.html
代わりに、float：leftを実行すると、divは互いに独立しており、マージンを使用して簡単に配置できます。
inlineではなく、についてinline-blockです。しかし、関連する最初のものは良いです：stackoverflow.com/a/11823622/918414