Question

有人能指出我正确的方向去除不同大小的DIV之间的垂直空间吗？他们（显然）在他们的身高相同的情况下工作正常，但他们的高度各不相同，我希望他们看起来很酷。

我希望他们都能在彼此之间筑巢（如第3栏）。

HTML：

    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>

CSS：

.productDivs {
    max-width: 290px;
    min-height: 50px;
    margin-bottom: 25px;
    margin-right: 18px;
    padding: 5px;
    border: 1px solid #e0e1dd;
    float: left;
    display: block;
}

这是我目前所拥有的fiddle。

请保持温和，我还在学习CSS：）

Answer 1

我建议使用Masonry和imagesLoaded库结合

http://masonry.desandro.com/

http://imagesloaded.desandro.com/

首先调用imagesLoaded库然后再调整砌体，显示应该是好的。

@model  Venta

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Venta</h2>

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@using (Html.BeginForm("Create", "Venta", FormMethod.Post))
{
    <div class="form-horizontal col-md-12" id="DivForm">
        <div class="form-group col-md-6">
            @Html.LabelFor(model => model.Codigo_, htmlAttributes: new { @class = "col-md-5 control-label" })
            <div class="col-md-7">
                @Html.TextBoxFor(model => model.Codigo_, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Codigo_)
            </div>
        </div>

        <div class="form-group col-md-6">
            @Html.LabelFor(model => model.Nombre_, htmlAttributes: new { @class = "col-md-5 control-label" })
            <div class="col-md-7">
                @Html.TextBoxFor(model => model.Nombre_, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Nombre_)
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Agregar Stock" class="btn btn-default btn-primary btn-block" />
        </div>
    </div>

    //More filds here

}

<script>
    $(function () {
        $("#DivForm #Codigo_, #DivForm #Nombre_").bind('keyup', function (e) {
            if (e.keyCode === 13) { // 13 is for enter key
                alert(); // Do something else
                return false;
            }
        });
    });
</script>

这里有一个jsfiddle： https://jsfiddle.net/1hc31mth/1/

Answer 2

这不是一个简单的答案。 float：left将使它包裹在最高的盒子的底部边缘下方，该盒子在它上面的行的右侧。所以你最终得到了这些垂直排水沟。当我在http://www.eonline.com工作时，我们在主页上遇到了同样的问题。

我的朋友Lou为该网站创建了所谓的 Liquid Pinning 引擎。当他卡住时，我能够帮助他解决问题。您可能想要通过此脚本深入了解如何移动div：http://www.eonline.com/resources/js/liquid_pinning/liquid_pinning.js

我相信它们绝对定位，使用固定的像素高度。有阵列，跟踪每列的总高度和数量。根据需要调整列。该脚本找到div和amp的放置位置。将其放入垂直空间区域，以便不创建垂直间隙。

这是一项非常酷的工作，我们以http://www.pinterest.com网站为蓝本进行了模拟。看起来你的div正试图达到同样的效果。

注意：创建该脚本是为了实现3列宽到4列宽到5列宽的外观＆amp;当用户在该主页上调整其分辨率时会发生这种情况。它还会将固定的小部件固定在右上角和右上角。左上角，根据需要。尝试放大＆amp;看出那种效果。

Answer 3

这是问题的解决方案（CSS，没有垂直间距，砌体布局） https://stackoverflow.com/a/25668648/871781

删除浮动DIV之间的垂直空间

3 个答案: