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包装

回答

相关问题