CSS浮動/內聯塊問題

Question

• 您可以檢查一下jsFiddle嗎？
• 調整“結果”框架的寬度。
• 請注意，框的布局在2列和3列之間切換。

我想讓布局看起來像這樣並且即使在調整窗口大小時也可以保持這樣的毛刺：

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

您可以更改HTML / CSS來完善布局並擺脫故障嗎？

提前致謝！

Answer 1

http://jsfiddle.net/znPGj/3/通過在img框上以px為單位設置高度來修復它

Answer 2

檢查以下示例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%;
}

Answer 3

你可以包裝所有的img在一個div並設置特定width的div

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

Answer 4

您是否嘗試過將寬度降低到32％？ 為我工作，但是我沒有在許多瀏覽器上進行測試。