gpt4 book ai didi

jquery - Div 在 jQuery 函数后没有正确显示

转载 作者:太空宇宙 更新时间:2023-11-03 22:05:05 25 4
gpt4 key购买 nike

我已经有了这个问题的解决方案,但我不明白为什么 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 像素,以便为青色部分提供正确的位置,但我不想这样做。

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

最佳答案

所有 div 都有 float: left

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

因此,就 float 的 div 而言,黄色的 div 不再存在。黄色 div 与蓝绿色 div 重叠。此处演示:http://jsfiddle.net/xgCbL/2/

您的解决方法是将 margin-left94px 添加到蓝绿色 div:

margin-left 意味着第一行不​​再有空间用于蓝绿色 div,因此它会下降到第二行。不幸的是,这也意味着第二行只有 3 个用于 float 元素的“插槽”,因为 margin-left 占用了其中一个“插槽”。

关于jquery - Div 在 jQuery 函数后没有正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7060335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com