0

我正在 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>

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

现在我的问题是新建公寓的位置。它没有以正确的方式向我展示设计。我应该在我的设计中改变什么然后我可以得到以下结果---

在此处输入图像描述

4

1 回答 1

3

根据您的屏幕截图，您可以明确：都给您的第 5 个 DIV。像这样写：

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

检查这个http://jsfiddle.net/rGaGq/1/

或者

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

于 2013-01-23T06:05:27.423 回答