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

时间:2011-08-14 23:03:43

标签: jquery html css

我已经有了解决这个问题的方法,但我不明白为什么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像素给予蓝绿色分割的正确位置,但我不想这样做。

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

3 个答案:

答案 0 :(得分:2)

所有div都有float: left

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

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

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

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

答案 1 :(得分:1)

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

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

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

重新排序它们。

答案 2 :(得分:1)

而不是:

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

使用:

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

请参阅Updated demo fiddle