水平分布，动态内容 [英] Horizontally distributed, dynamic content

问题描述

我有一个流体宽度div充满了JSON查询的缩略图，我试图均匀地分布这些缩略图的div的宽度。如果包围的div的宽度发生变化，这些缩略图必须允许换行和回流，并且可能在x和y维度以及加载的缩略图数量上有所不同。

I have a fluid-width div filled with thumbnails from a JSON query, and I am attempting to evenly distribute these thumbnails across the width of the div. These thumbnails must be allowed to wrap and reflow if the width of the enclosing div changes, and may vary in x- and y- dimensions, as well as in the number of thumbnails loaded.

我发现使用 text-align：justify; 和 display：inline-block 想使用静态HTML元素，如下所示：

http://jsfiddle.net/skywalkar/ gUcvq /

I have found using text-align: justify; and display: inline-block does exactly what I want with static HTML elements, like so:
http://jsfiddle.net/skywalkar/gUcvq/

然而，当我对通过JavaScript获取的内容做同样的事情时，它会恢复为纯左对齐的对齐方式 - Chrome和Firefox以左对齐方式显示它，但IE似乎放弃了显示缩略图！）：

http://jsfiddle.net/skywalkar/KdLyx/

When I do the same thing with content fetched via JavaScript, however, it reverts to plain left-justified alignment (if it even renders at all-- Chrome and Firefox render it as left-justified, but IE seems to give up displaying the thumbnails altogether!):
http://jsfiddle.net/skywalkar/KdLyx/

我的问题是：

如何强制JavaScript加载的缩略图像HTML版本一样水平对齐？

推荐答案

p>您在这里有2个问题。首先，你的span是div之外的 （老实说，你甚至不需要span，只需使用：after 伪元素）。

You have 2 problems here. First, your span is outside of the div (honestly, you don't even need the span, just use the :after pseudo element).

其次，对齐依赖于空格。您插入的图片不包含空格/换行符等。这就是为什么他们不会证明的原因。

Second, justification relies on whitespace. You're inserting your images without including a space/newline/etc. That's why they won't justify.

http：/ /jsfiddle.net/KdLyx/7/

这篇关于水平分布，动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！