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

Question

我使用Bootstrap和jQuery作为Web管理员后端的核心基础。 我添加了一个在BS Modal中打开的“ Media Uploader”，它工作正常，但是随着图像的上传（使用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/