フロートは常に便利なわけではありません。たとえば、画像でグリッドを組版するときです。 場合によっては、floatの動作を模倣するinline-blockを使用することが適切です。
インラインブロックとは何ですか？
通常のブロック要素構造：
インラインブロックは、表示プロパティに割り当てることができる値です。 この名前は、インライン要素とブロック要素の両方のいくつかの特性に由来しています。
- ブロック要素は、高さ、幅、パディング、マージン、境界線であり、垂直方向に互いに下に配置されます。
- インライン要素は、水平方向に次々に配置されます。
- インラインブロック要素には、 ブロック要素とインライン要素の両方の特性があります。
インラインブロックとフロート：違い
- フロートとは異なり、インラインブロックはドキュメントフロー-「ドキュメントフロー」にあるため、clearfixやoverflow：hiddenを使用する必要はありません。
- 明らかに、floatはtext-align：centerを使用して中央に配置することはできません。
- インラインブロックはデフォルトでベースラインに揃えられ、上部にフロートします。
- ページに複数のインラインブロックがあり、それぞれが新しい行にある場合、それらの間にいくつかのギャップがあります。
- インラインブロックは、IE6およびIE7ではサポートされていないか、部分的にサポートされていません
デモを見る
いくつかの手法を使用して、ギャップに対処できます。 リスト内のスペースの削除：
<ul> <li> one</li><li> two</li><li> three</li> </ul>
負のマージン値を使用：
nav a { display: inline-block; margin-right: -4px; }
終了LIタグのない奇妙な方法：
<ul> <li>one <li>two <li>three </ul>
font-size値をゼロに設定する：
nav { font-size: 0; } nav a { font-size: 16px; }
これらのメソッドの詳細については、 CSS-tricksの記事をご覧ください 。
使用するもの
インラインブロックとフロートの選択は、特定の設計で解決するタスクに基づいて行う必要があります。 最終的には、これらはすべてこれら2つのツールの違いに帰着します。
- 要素の垂直方向の配置と水平方向の配置をさらに制御する必要がある場合は、インラインブロックを使用します。
- 古いブラウザのサポートと同様に要素をラップする必要があり、ブロック間の空白の問題に煩わされたくない場合は、floatを使用します。
画像グリッド
このようなグリッドは、フォトギャラリーで使用されます。 この例は、インラインブロックとフロートの動作を示しています。 画像の高さが同じ場合、floatの使用は正当化されます。 高さが異なる場合、要素は曲がって表示できます。
インラインブロックは、ライン内の同じレベルにあるため、このような問題はありません。 したがって、インラインブロックはギャラリーのレイアウトにより適しています。
デモを見る
おわりに
ページレイアウトの多くの問題を解決するために、floatを使用することに慣れています。 ただし、インラインブロックを使用する方が簡単で便利な場合があります。 また、古き良きテーブルを使用する方が正しい場合もあります。
トピックに関する使用済み資料と役立つリンク：
- アジサシのスタイル： フロートvs. インラインブロック
- Vanseo Design： フロートの代わりにインラインブロックを使用する必要がありますか？
- CSS-Tricks.com： インラインブロック要素間のスペースの戦い