appendTo後不必要的div包裝

我還帶着另一個問題。希望你能幫助我。

背景資料：

我就可以存儲通過拖動和拖放到相應的網格場項目網格工作。當電網（通過切換到不同的星期編號FE）該周匹配的對象重新計算得到附加到我的網格行像這樣：

//Create orderItem to place into the DOM 
var div = "<div class='draggable orderItem stored' id='" + orderId + "'>" + 
        "<a href='#/order/" + orderId + "'>" + orderId + "</a>" + 
        "</div>"; 

//Append div to the end of the gridRow 
var gridRow = "div #" + planningList[plannedItem].get("resource").cid + ".eventRow"; 
$(div).appendTo(gridRow);

上面的代碼（如預期）追加新創建在行的末尾，我的網格中的DIV項目「下一個」。我的DOM也看起來像預期的一樣。該eventRow同時包含有信息網格領域，如日期，還有追加訂單這是通過使用JavaScript定位放置：

<div id="1886" class="eventRow"> 
    <div class="gridRow"></div> 
    <div id="c303" class="draggable orderItem stored" style="width: 90px; position: relative; left: -680px; top: 0px;"></div> 
    <div id="c308" class="draggable orderItem stored" style="width: 180px; position: relative; left: -775px; top: 20px;"></div> 
    <div id="c312" class="draggable orderItem stored" style="width: 180px; position: relative; left: -960px; top: 40px;"></div> 
</div>

問題：

所以，如果一切get的正確添加，並且頂部和左側的位置會根據放置在eventRow中的項目數量保持良好變化，那麼問題是什麼？

沒有直到十個左右的項目被添加到eventRow。之後，突然間，下一個要添加的項目被拖出預期的位置。我花了一段時間來檢查發生了什麼，最好的我可以弄清楚的是（在我的CSS中向左浮動），這些項目在該行之後追加，即使之後它們被重新定位。

因此，當div項的總量達到一個大於屏幕寬度的集合寬度時，瀏覽器將環繞DIV並啓動DIV內新行上的下一個元素。這是我的定位混亂，因爲它整齊地不斷增加一個增加左值的行。

我的CSS是如下：

div.eventRow { 
    clear: left; 
    width: auto; 
    height: 90px; 
    overflow: visible; 
} 
div.orderItem{ 
    float:left; 
    text-align: center; 
    margin: 1px 5px 0px 0px; 
    padding: 0px 0px 0 5px; 
    background-color: #FFFFFF; 
    width:60px; 
    height:60px; 
    border:1px solid #000000; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    line-height: 60px;  
} 
div.orderItem.stored{ /* has been rendered on the grid */ 
    width:90px; 
    height: 20px; 
    line-height: 16px; 
    display: inline-block; 
}

TLDR;

我的空間不足以在行內附加新的DIV。當發生這種情況時，網絡瀏覽器會將新添加的代碼包裝到一個新行中，這會弄亂我的定位。由於這種情況在較小的分辨率屏幕上可能會更快發生，因此我希望阻止發生這種包裝或找到一個體面的替代方案來解決此問題。

來源

2014-04-03 mkoster

我已經試過三種可能的解決方案：

只會使DIV的一個像素的寬度或改變顯示類型之後隱形附加到網格。
刪除左側的浮標，導致所有的訂單在彼此之下對齊。
更改剩餘頭寸的計算方式。

前兩個失敗，因爲DIV上的最小寬度不影響內聯文本。同樣，在放置問題後重新定位和重新定位仍然會發生。去除左側的浮動物使得基於頂部的定位（在網格行中彼此下面的多個物品）非常困難。

所以最終的解決方案是找出當 DIV包裝發生。這是通過比較預期的位置（假設訂單放在前一個的後面）和實際位置來完成的。如果這不匹配，您知道父DIV正在包裝該項目。

來源

2014-04-23 07:23:43 mkoster

appendTo後不必要的div包裝

回答

相關問題