6か月前、Habrで記事の翻訳を行いました。 今回は少し異なる角度から見てみましょう。 サイトの開発時には、フロートを使用して、サイドバーなどのページにいくつかのブロックを配置することがよくあります。 しかし、本当に必要ですか？
フロートは常に便利なわけではありません。たとえば、画像でグリッドを組版するときです。 場合によっては、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を使用することに慣れています。 ただし、インラインブロックを使用する方が簡単で便利な場合があります。 また、古き良きテーブルを使用する方が正しい場合もあります。
トピックに関する使用済み資料と役立つリンク：