[解決済み】 float:left; vs display:inline; vs display:inline-block; vs display:table-cell。

2022-03-31 23:28:52

質問

私の質問

プロのウェブデザイナーが好む方法はありますか？
WebブラウザがWebサイトを描画する際、これらの方法のうち、どれが優先されますか？
これはすべて個人の好みなのでしょうか？
その他、私が見逃しているテクニックはありますか？

注：上記の質問は、マルチカラムレイアウトの設計に関するものです。

float:left。

この方法は、私がカラムレイアウトを作成するときにいつも使っている方法で、うまくいっているようです。しかし、親はそれ自体で折りたたまれます。 clear:both; を追加しました。またコンは、テキストを縦に揃えることができないことを発見しました。

display:inlineで表示します。

これは、親が折りたたまれる問題を修正するようですが、空白が追加されます。

http://jsfiddle.net/CDe6a/1/

htmlから空白を取り除くことは、この問題を解決する最も簡単な方法のように思われますが、htmlに本当にこだわるのであれば、それは望ましいことではありません。

http://jsfiddle.net/CDe6a/2/

display:inline-blockを使用します。

と同じような挙動をするようです。 display:inline; .

http://jsfiddle.net/CDe6a/3/

display:table-cellです。

http://jsfiddle.net/CDe6a/4/

完璧に動作します。

私の感想です。

レイアウトを崩すような特定の例外など、トンデモないものを見逃していると思いますが。 display:table-cell; が一番効きそうなので、今後は float:left; でいつも失敗してしまうので clear:both; . このことについて、ウェブ上で多くの記事やブログを読みましたが、ウェブサイトをレイアウトするときに何を使うべきかについて、明確な答えをくれるものはありませんでした。

どのように解決するのか？

ご質問の選択肢のうち

float:left;

私がフロートを嫌うのは、フロートをクリアするために追加のマークアップが必要だからです。私が知る限りでは、全体の float のコンセプトは、CSS仕様の設計が悪かったと思います。今さらどうしようもないことですが。でも、重要なのは、それが機能するということ、そしてすべてのブラウザで（IE6/7でも）機能するということです、だから気に入ったなら使ってください。

を使用する場合、クリアのための追加マークアップは必要ないかもしれません。 :after セレクタを使用してフロートをクリアすることもできますが、IE6 や IE7 に対応するためには、このオプションはありません。

display:inline;

これはレイアウトに使うべきではなく、例外としてIE6/7では display:inline; zoom:1 のサポートが切れてしまった場合のフォールバックハックです。 inline-block .
display:inline-block;

これは私のお気に入りのオプションです。すべてのブラウザで一貫してうまく機能します。ただし、IE6/7では、一部の要素でサポートされているという注意点があります。しかし、これを回避する簡単な方法は、上記を参照してください。

もう一つの大きな注意点は inline-block は、インラインのため、要素間の空白がテキストの単語間の空白と同じように扱われるため、要素間に隙間ができてしまうことです。これを回避する方法はありますが、どれも理想的ではありません。(一番良いのは、単純に要素の間に空白を入れないことです。）

display:table-cell;

もうひとつは、ブラウザの互換性に問題があります。古いIEでは全く動作しません。しかし、他のブラウザでも table-cell としてスタイル付けされた要素の内部で使用されるように設計されています。 table と table-row を使用しています。 table-cell を単独で使用することは意図した方法ではないので、ブラウザによって扱いが異なる可能性があります。

その他の見逃しがちなテクニックは？はい、あります。

マルチカラムレイアウト用と言うことなので、そこに CSSカラム機能について知っておくとよいでしょう。しかし、これは最もよくサポートされている機能ではありません（IEではIE9でもサポートされておらず、他のすべてのブラウザではベンダープレフィックスが必要です）ので、使用しない方がよいかもしれません。しかし、これは別の選択肢であり、あなたは質問したのです。
また、CSS FlexBoxという機能があり、ボックスからボックスへテキストを流すことができるようにすることを目的としています。これは複雑なレイアウトを可能にするエキサイティングな機能ですが、まだ開発中のものです。 http://html5please.com/#flexbox

お役に立てれば幸いです。