html div位置和高度

Question

我正在设计和开发MVC3中的网站。我为我的网页创建了以下设计 -

对于上面的设计，我写了以下html -

<div style="float:left;width:100%;" class="singleFloorContainer" id="SMfloor-@item.Id">
    @if (! string.IsNullOrEmpty(item.FloorNumber))
    {
    <div class="editFloorNumberBlock">
        <span class="editFloorNumber" style="padding-bottom:5px;">@item.FloorNumber</span>
        <span class="editBaseRate hideOverflow">@Html.TextBoxFor(modelItem => item.BaseRate, new { @style = "width:80%;", @onkeypress = "return isNumberKey(event)" })</span>
        <span style="bottom:5px;position:absolute;width:100%;">
         <span style="width:60%;position:absolute;bottom:15px;float:left;">@Html.TextBoxFor(model => item.FloorRise, new { @style = "width:80%;", @onkeypress = "return isNumberKey(event)" })</span>
        <span style="width:40%;position:relative;bottom:15px;float:right;color:#730209;">@calculatedFloorRise</span>
        </span>
        <div style="position:absolute;bottom:0px;" class="editFloorInfo" id="floorIdForEdit-@item.Id">
        <span style="position:relative;" class="linkSave" >Save</span>
        </div>
    </div>
    }
     <div style="float:left;width:92%;" class="WholeApartmentContainer">

    @foreach (var apt in item.Apartments.Where(a => a.IsDeleted != true))
    {

        <div class="apartmentContainer" style="float:left;min-width:22%;max-width: 22%;">
            @Html.Action("DisplayApartmentForSaleMapEdit", "Apartment", new { apartmentId = apt.Id, apartmentStatus = apt.Status })
        </div>
    }
     <div class="addApartmentDiv OtherLinkStyle" style="float:left;" id="floorId-@item.Id">+apartment</div>  
   </div>

   </div>

当用户点击 +公寓时，会添加新的空公寓楼块。最初我设置公寓高度。然后，用户可以在公寓中添加不同的元素，然后更改公寓的高度。

现在我的问题在于新增公寓的位置。它没有以适当的方式向我展示设计。我应该如何改变我的设计然后我可以得到以下结果---

Answer 1

根据你的屏幕截图，你可以给你的第五个DIV 清楚：两个。写得像这样：

div:nth-child(4n+1){
    clear:both;
}

选中此http://jsfiddle.net/rGaGq/1/

或

为了更好的结构，您也可以使用http://masonry.desandro.com/。