0

我正在尝试创建的网站在图像定位方面几乎没有问题。我目前正在使用一个名为 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;

    }

请帮我编码，非常感谢。

4

1 回答 1

0

I think your Problem is the absolute positioning your using on note. By default, absolute positioning takes that div out of the normal flow of page. Try changing to relative and re-position and see if that works.

于 2013-06-22T06:14:32.440 回答