CSS float / inline block проблема

Question

• Не могли бы вы изучить этот jsFiddle ?
• Измените ширину фрейма "result".
• Обратите внимание, что расположение блоков переключается между 2 и 3 столбцами.

Этот глюк раздражает Iхотите, чтобы макет выглядел так и оставался таким даже при изменении размера окна:

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

Не могли бы вы изменить HTML / CSS, чтобы улучшить макет и избавиться от сбоев?

Заранее спасибо!

Answer 1

http://jsfiddle.net/znPGj/3/ исправляет это, устанавливая высоту в пикселях на полях img

Answer 2

Вы пытались сбросить ширину до 32%?Работал для меня, но я не тестировал во многих браузерах.

Answer 3

Вы можете обернуть все img в div и установить width на div

Пример: http://jsfiddle.net/jasongennaro/znPGj/5/

Answer 4

проверьте этот пример http://jsfiddle.net/sandeep/znPGj/4/ css:

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%;
}