Question

我正在尝试创建的网站几乎没有关于图像定位的问题。我目前正在使用名为MobilyNotes的jQuery在我的索引页面上显示动画图像，但是当我调整浏览器大小时，在全屏模式浏览器中查看时位于左侧的图像在调整大小时向右移动。这是我的HTML代码：

<div class="wrap">
<div class="notes_img">
                <div class="note">
                    <img src="images/img1.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img2.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img3.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img4.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img5.jpg" alt="" />
                </div>
                </div>

和CSS：

body {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #333333;
    background-color: #ffffff;
    background:url(../images/pattern.png);
    background-repeat:repeat;

    }


#img_1 {
    background: #ffffff url('img_sl/bg_top.jpg') repeat-x;
    height: 102px;
    background-color:transparent;
    }

#img_1 .logo_upr {
    width: 659px;
    text-align: left;
    margin: 0 auto 0;
    }

#img_1 .logo {
    height: 20px;
    padding-top: 155px;
    float: left;
    }

#img_1 .logo_us {
    float: right;
    position: relative; right: 5px;
    }

#img_1 .logo1 {
    margin: 0 15px 6px 0;
    }


#img_2 {
    background: #ffffff url('img_sl/bg_btm.jpg') repeat-x;
    height: 210px;
    background-color:transparent;
    }
#img_2 .logo_jp {
    width: 655px;
    text-align: right;
    margin: 0 auto 0;

    }

#img_2 .logo_jp IMG {
    position: relative; right: 20px;

    }

#content {
width:220px;
margin:200px auto 0;
}

.wrap {
float:right;
clear:both;
width:250px;
margin-top: -270px;
margin-right: 500px;

}

.notes_img {
position:relative;
float:right;
clear:both;
width:200px;
height:200px;
}

.note {
    position: absolute;
    top: 1px;
    left: 2px;
    padding: 10px;
    background: #000;
    border: 1px solid #333;
    width: 200px;
}


ul.listNotes,
ul.listNotes li {
display:block;
list-style:none;
padding:0;
margin:0;
}

a {
color:#fff;
}

a img {
border:none;
}


#mainArea {
    background: #000000;
    height: 332px;
    border-color:#996;
    border:medium;
    }

#imgs {
    width: 655px;
    text-align: left;
    margin: 0 auto 0;
    }

#mainArea .sitename {
    float: left;
    margin-top: 146px;
    margin-left: -100px;
    }

#mainArea .lang {
    float: right;
    margin-top: 140px;

    }

#content {
width:220px;
margin:200px auto 0;
}

.wrap {
float:right;
clear:both;
width:250px;
margin-top: -270px;
margin-right: 500px;

}

.notes_img {
position:relative;
float:right;
clear:both;
width:200px;
height:200px;
}

.note {
position:absolute;
top:0;
left:0;
padding:10px;
background:#000;
border:1px solid #333;
width:200px;
}


ul.listNotes,
ul.listNotes li {
display:block;
list-style:none;
padding:0;
margin:0;
}

a {
color:#fff;
}

a img {
border:none;
}


#mainArea {
    background: #000000;
    height: 332px;
    border-color:#996;
    border:medium;
    }

#imgs {
    width: 655px;
    text-align: left;
    margin: 0 auto 0;
    }

#mainArea .sitename {
    float: left;
    margin-top: 146px;
    margin-left: -100px;
    }

#mainArea .lang {
    float: right;
    margin-top: 140px;

    }

请提前帮助我编写代码。

Answer 1

我认为你的问题是你在笔记上使用的绝对定位。默认情况下，绝对定位将该div从正常的页面流中取出。尝试更改为相对位置并重新定位，看看是否有效。

当我调整浏览器大小时，图像会移出位置？

1 个答案: