0

私が作成しようとしている Web サイトには、画像の配置に関する問題はほとんどありません。現在、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

あなたの問題は、メモで使用する絶対的な位置付けだと思います。デフォルトでは、絶対配置はその div をページの通常の流れから外します。相対位置に変更して再配置し、それが機能するかどうかを確認してください。

于 2013-06-22T06:14:32.440 に答える