一行3个div，响应（改变div大小而不是下降到新行）

Question

我希望在一行中有3个div / images（admin有div，结果页面有图像），其中有8个或更多/更少（动态）。

我使用了列计数，但它工作正常，但我有几个问题。

1. 首先是支持，因为我必须为IE7优化它。
2. 其次是它如何显示图像（从上到下而不是从左到右）。
3. 当您有4,7,10,13,16等图像时，第三个是问题。

我不想使用花车。有没有办法让它响应？所以基本上，最大大小为XXXpx的div，它会调整大小，而不是在调整页面大小时放到其他行？

...

http://jsfiddle.net/xabxt3re/1/

有时它不会让你调整右侧的大小，只需关闭页面并再次打开它。应该管用。奇怪的JSFiddle问题。在您点击之后，它会在最后添加新图像，以便您可以观察我想要避免的行为。

所以基本上，有一些方法，在一行中有3个div / images，所以如果浏览器窗口不够宽，他们会调整大小，而是放到另一行？ 或者修正列数显示图像的顺序，以及如何用2张图像填充前两列而不是平均分配图像？

Ps。：如果有人对我的问题投票，你至少可以告诉我为什么吗？所以我可以改进并下次学习？因为它真的很烦人。我提供了所有细节，甚至是我所拥有的代码。

感谢您的编辑建议。我在链接后添加了空格，但我忘了你必须添加2个空格来创建一个....

Answer 1

请查看此jsfiddle Demo。它应该工作到IE8。对于IE7，请查看此博客文章。 http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug

尝试更改jsfiddle

中width类的.main

Answer 2

确定，

所以在我尝试的所有选项之后，我不得不同意这一点：

我不得不切换到桌子并且它有效......多么令人惊讶。

所以这里是整个代码，即使是JS也可以添加新内容。

<强> http://jsfiddle.net/xabxt3re/6/

<强> HTML

<table class='table'><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
    </tr><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
    </tr><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
</tr></table>

<强> CSS

.table{
    max-width: 320px;
    margin: 0 auto;    
}
img {
    max-width: 100%;
    height: auto;
}

<强> JS

var NewContent2 = "<td><img src='https://www.hojko.com/download/file.php?avatar=5439_1294832739.jpg'></td>";
$(".table").click(function () {
    $page = $(this).children("tbody");
    if ($(this).find("td").length % 3 == 0){
        $page.append("</tr><tr>");
    }
    $page.append(NewContent2);
});