0

我想在一行中有 3 个 div/图像（管理员有 div，结果页面有图像），其中有 8 个或更多/更少（它是动态的）。

我使用了 column-count，效果很好，但是我遇到了一些问题。

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

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

...

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

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

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

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

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

4

2 回答 2

0

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

尝试更改jsfiddlewidth中的类.main

于 2014-11-28T09:30:12.197 回答
0

好的，

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

我的

我不得不切换到桌子，它的工作原理......多么令人惊讶。

因此，即使使用 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);
});
于 2014-11-29T02:15:21.123 回答