Question

我希望id="#div3"能够独立工作，但它只跟随id="#div1"。如何使我的第三个div独立于第一个div？ Here is a JSFiddle demo。由于div3，您可以看到div1阴影下降。

此外，当我更改div3页边距时，它也会更改div1和div2页边距。

另外，我不希望我的页面向下滚动;我希望我的图像（在div3中）保持在右下角的位置。

<div id="div1">
    <div id="div2" align="center"><div>
</div>
<div id="div3"></div>

#div1
{
height:190px;
margin-top:-310px;
margin-left:-10px;
width:101%!important;
background-image:url("misty_2copy.jpg");
position:relative;
box-shadow:0px 0px 10px black;
z-index:6000;
}

#div1:hover
{
box-shadow:0px 0px 10px teal;
}

#div2
{
height:190px;
margin-top:-10px;
margin-left:-810px;
background-image:url("Untitled-12.png");
background-repeat:no-repeat;
position:relative;
z-index:6500;
}

#div3
{

margin-top:210px;
margin-left:60%;
height:590px;
background-image:url("Untitled-3.png");
background-repeat:no-repeat;
position:relative;
}

 $(document).ready(function()
 {
    //$("#div2").toggle();
    $("#div1").animate(
    {
        marginTop:000
    },1500,function()
    {
            $("#div2").animate(
    {
    marginLeft:400
    },500,function()
    {});
    });
});

Answer 1

那是因为你没有正确关闭div标签：

<div id="div2" align="center"><div>
                         -----^

Answer 2

您在第二个div上错过了一个结束斜杠</div> ...

Answer 3

div2位于div1内首先关闭div1，然后开始div2 像这样：

<div id="div1"> content goes here</div>
<div id="div2" align="center"> content goes here</div>
<div id="div3"> content goes here</div>

为什么我的css和div工作不正常？

3 个答案: