保持缩略图预览行均匀分布

Question

我使用Bootstrap和jQuery作为Web管理员后端的核心基础。我添加了一个＆＃34; Media Uploader＆＃34;在BS模态中打开，工作正常，但是当图像上传（使用dropzone.js一个一个）时，它们会被添加到主预览区域，并添加到现有图像之前。

当发生这种情况时，如果图像的高度不同，我会得到以下结果：

我知道原因是什么，我只是想知道是否有一个简单的方法来解决这个问题。这是制作每个缩略图框的标记：

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 media-col">
    <div class="box media-box">
        <div class="box-body table-responsive">
            <img src="SOME IMAGE">
            <input type="text" class="form-control" readonly="true" value="SOME IMAGE URL">
        </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

所有图片都在一个<div class="row"></div>

内

我的主要问题是图像缩略图的响应性。我无法为每个X＃图像创建一个包装器，因为每行显示的图像数量会根据屏幕分辨率而变化。

Answer 1

问题是浮点数如何在CSS中起作用的奇怪效果。如果你了解它就有意义，但如果你不了解它会显得很奇怪。

我建议将主要内容设置为display:inline-block而不是float:left。然后，无论屏幕宽度如何，它们都会自动“排”自己，如下所示：

http://codepen.io/EightArmsHQ/pen/zxXOWX

另一种选择是使用像砌体这样的东西，它将absolute（并且稳健地）以一种很好的方式定位所有元素。

http://masonry.desandro.com/