0

MVC3 で Web サイトを設計および開発しています。私は自分のウェブページのために次のデザインを作成しました - ここに画像の説明を入力

上記のデザインについて、私は次の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 にclear:bothを指定できます。次のように書きます。

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

これをチェックしてくださいhttp://jsfiddle.net/rGaGq/1/

また

構造を改善するには、http://masonry.desandro.com/ も使用できます。

于 2013-01-23T06:05:27.423 に答える