CSSフロート/インラインブロックの問題

Question

• this jsFiddleをご覧ください。
• "result"フレームの幅を変更します。
• ボックスのレイアウトが2と3の間で切り替わることを確認してください。 列。

このグリッチは、私はレイアウトは次のようになり、私は、ウィンドウのサイズを変更した場合でも、このように滞在したいanoyingさ：

_________ 
| ▄ ▄ ▄ | 
| 1 2 3 | 
| ▄ ▄ ▄ | 
| 4 5 6 | 
¯¯¯¯¯¯¯¯¯ 

あなたはレイアウトを完璧にHTML/CSSを変更して取り除くでした不具合の？

ありがとうございます！ http://jsfiddle.net/sandeep/znPGj/4/ CSS IMGのボックス上のピクセルで高さを設定することで

Answer 1

http://jsfiddle.net/znPGj/3/修正それを

Answer 2

チェックこの例：

a { 
    float:left; 
    width: 33%; 
    margin: 0; 
    padding: 4px 0; 
    color: #000; 
    font: medium sans-serif; 
    text-align: center; 
} 
a:nth-child(4){clear:both} 
img { 
    width: 80%; 
} 

Answer 3

あなたはdiv内のすべてのimgをラップし、上の特定のwidthを設定することができますdiv

例：http://jsfiddle.net/jasongennaro/znPGj/5/

Answer 4

幅を32％に落としてみましたか？私のために働いたが、私は多くのブラウザでテストしなかった。