Question

我已经有了解决这个问题的方法，但我不明白为什么div在执行jQuery函数后没有正确显示。

我有一些分歧，其中一个是绝对的。我想将黄色分区放在绿色分区旁边，小号组必须转到新的分区。

只有青色的和黄色的一个停留在同一个地方，当我在青色的左边缘添加94个像素时，它会转到新的行，但它没有正确显示。这听起来像一个奇怪的问题，但如果你尝试html代码和jQuery函数，你会明白： - ）

这是我在<head>中添加的CSS：

.iconHolder {
    margin: 10px;
    height: 85px;
    width: 64px;
    float: left;
}

这是我的html页面（我还有一个按钮，我可以点击它来执行jQuery功能）：

<div style="width: 336px; height: 315px; border: 1px solid black;">
    <div class="iconHolder" style="background-color: red;">
    </div>

    <div class="iconHolder" style="background-color: blue;">
    </div>

    <div class="iconHolder" style="background-color: green;">
    </div>

    <div class="iconHolder" style="background-color: yellow; position: absolute;">
    </div>

    <div class="iconHolder" style="background-color: teal;">
    </div>

    <div class="iconHolder" style="background-color: black;">
    </div>

    <div class="iconHolder" style="background-color: pink;">
    </div>

    <div class="iconHolder" style="background-color: gray;">
    </div>
</div>

这是我用jQuery函数测试的：

$(function() {
  $("#btnTest").click(function() {
    var iconHolderGreen = $(".iconHolder:eq(2)");
    var iconHolderYellow = $(".iconHolder:eq(3)");
    var iconHolderTeal = $(".iconHolder:eq(4)");

    iconHolderYellow.css("top", iconHolderGreen.position().top);
    iconHolderYellow.css("left", iconHolderGreen.position().left + iconHolderGreen.width() + 20);

    iconHolderTeal.css("margin-left", 94);

// Or try iconHolderTeal.css("margin-left", 10);
  });
});

我最后可以-84像素给予蓝绿色分割的正确位置，但我不想这样做。

有人可以向我解释为什么这不能正常工作吗？

Answer 1

所有div都有float: left。

只有黄色div有position: absolute，因此float: left变得无关紧要 - 元素已绝对定位并从正常流中移除。

因此，就浮动div而言，黄色div不再存在。黄色div与青色div重叠。这在此处得到证明：http://jsfiddle.net/xgCbL/2/

您的修复是将94px margin-left添加到青色div：

margin-left表示青色div的第一行不再有空格，因此它会下降到第二行。不幸的是，这也意味着第二行只有3个“槽”用于浮动元素，因为margin-left占用了一个“槽”。

Answer 2

绝对定位的元素不会在文档流中保留空间。你实际上是将青色div所需的尺寸增加了94，这使得它不再适合第一行。它漂浮到第二行，左边距为94.

相反，您可以通过增加绿色div的右边距将其向下移动到第二行（它会强制青色div离开第一行，但不会影响青色div的位置。第二行）。

如果你要做的只是重新排序元素，那么很多更简单的方法。我建议您使用.show（）/ .hide（）添加/删除元素，并使用.insertBefore（）/ .insertAfter（）

重新排序它们。

Answer 3

而不是：

    iconHolderTeal.css("margin-left", 94);

使用：

    iconHolderGreen.css("margin-right", 94);

请参阅Updated demo fiddle。

在jQuery函数之后，Div没有正确显示

3 个答案: