入れ子にされた浮きをクリアする

Question

私は、サムネイルのグリッドを持つ画像ギャラリーのような画像のタイルグリッドを作成しています.3枚の画像の後に次の行にラップする画像が必要です。だから私はそれぞれの画像を含むdivsの束を浮かべていて、次に3つの画像の後に浮動小数点を手動で消去します。

問題は、すでにすべてを整理するためにfloatを使用しているかなり複雑な既存のテンプレート内で作業していることです。グリッド内の浮動小数点数をクリアするとページ全体が乱れてしまいます。これはおそらくページ内の浮動小数点数をすべてクリアしているためです。私に何ができる？

空白のdivを挿入してfloatをクリアします。すなわち：

<div style='clear:right'> 

浮動小数点をクリアする他の方法のほうが良いでしょうか？

Answer 1

あなたのマークアップはそうのようなものである場合：

div 
img 
img 
img 
row break 
img 
img 
img 
... 

次に、あなたはすべての三つのブロックの後にこれを追加する必要があります。

<br class="clear" /> 

しかし、あなたのマークアップは次のようにある場合：

div 
div 
    img 
    img 
    img 
div 
    img 
    img 
    img 
... 

..次に、内部のDIVに次の.clearクラスを適用するだけです。

いずれかの方法で、あなたのスタイルシートにこれを追加します。

.clear:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
* html .clear { height: 1%; } 
*:first-child+html .clear { min-height: 1px; } 

あなたは山車が含まれている他のすべての要素のために、このクラスを使用することができます。

Answer 2

IE> = 8のサポートがうまくいく場合は、浮動小数点の代わりにdisplay: tableを使用することを検討してください。グリッドを表示したいので、より適切な方法です。

http://www.quirksmode.org/css/display.html#table

Answer 3

私は、各画像を含む要素のスタイルをdisplay: inline-block;を使用しようと思います。今

 
<style> 
.figure { 
    display: inline-block; 
} 
</style> 

<div class="figure"> 
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" /> 
</div> 

がIE6、IE7とFirefox 2でこれを使用して、いくつかの落とし穴：1つの容器のためのHTMLコードの 例

• IE 6とhasLayoutがトリガしている7つの意志だけのスタイルのインライン要素

 
<!--[if lte IE 7]> 
.figure { 
    display: inline; 
    zoom: 1; /* triggering hasLayout */ 
} 
<![endif]--> 

：、私はあなたがこれを行う場合は、インラインブロック 行動が表示されます意味します今のFirefox 2はあなたに少しを困らせるために起こっている

 
.figure { 
    display: -moz-inline-stack; 
    display: inline-block; 
} 

• ：
• のFirefox 2は、別の表示指示により、後者に先行する必要がありますので、display: inline-block;を理解していません。まず、.figure要素内に1つの子要素しか持たない必要があります。スタック。あなたのイメージの下に凡例を持っているのであれば、+ P div.figureとIMGとの間のdivを挿入

 

    <div> 
     <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" /> 
     <p>Second child of .figure>div and not .figure</div> 
    </div> 
</div> 

セカンド（まだのみFX2で）、あなたは「時間からのあなたができる時間に気づくでしょうこれ以上-moz-inline-stack'ed要素内のテキストを選択することも、含まれる可能性のあるリンクをクリックすることもありません。それ以外の場合は、少しの助けになるだろう、定期的なCSSの後に行われなければならないIE6/7のための当然の

 
    .figure div { 
     position: relative; 
    } 

条件付きコメント：この修正は、比較的追加のdivを配置することです。

最後に、洗練されたソリューションがない場合は、TABLEを使用します。 tdとno thだけの単純なテーブル。あることが発生した場合：

• IE6と7が好きではないdisplay: table-sth
• あなたのCMSはinline-blockため
• Firefox 3のサポートは役に立たないのであるそうでない場合は、別のサイトで正常に動作します何に問題が発生し

それはあなたがテーブルと半分ユーザーに問題を引き起こしていない半ソリューションを使用し、誰にとっても良いでしょうはいより

;）

Answer 4

同じ に等しい3枚の画像が占めていること - （お持ちでない場合 ）
1. は コンテナのdivの制限幅を設定し
2. 適切な容器のdiv要素を作成します。
3. すべての画像をフローティングにする - が自動的に折り返すようにします。
4. 'overflow：hidden'でコンテナdivを設定してください。 が浮かびます。

簡易版は、次のようになります。助けていないようです

<style> 

div#container { 
    overflow: hidden; 
    width: 300px; 
} 

div#container img { 
    float: left; 
    width: 100px; 
} 

</style> 

<div id="container"> 

    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 

</div>