0

私の問題は、ブラウザのサイズを変更すると、画像が独自の指定された形式にとどまるのではなく、互いに衝突することです。現実的には、ブラウザのサイズを変更するときに、画像がブラウザとともに移動するが、互いに衝突しないようにしたいと考えています。これがコードです。上級者に感謝します。

これが私のHTMLです...

<div id="header-images">

    <img src="images/title.png" id="header_title" class="animated bounceInLeft" alt="Title Header"></img>

    <img src="images/header_interface.png" id="interface" class="animated bounceInRight" alt="Poyan's Interface"></img>
</div>

これが私のCSSです...

    #header_title {     
    width: 561px;   
    height: 248px;
    margin-top: 175px;
    left: 37.5%;
    margin-left: -280.5px;
    position: absolute;
    z-index: -1000;
    min-width: 100px;
}

    #interface {
    min-width: 100px;
    width: 338px;
    height: 315px;
    margin-top: 165px;
    left: 73%;
    margin-left: -169px;
    position: absolute;
    z-index: -1000;
}

さらに必要な場合はお知らせください。

4

2 に答える 2

0

このcssを使用して画像の幅を修正し、距離を保ち、衝突しないようにします。

#header-images img {
    Width: 45%;
}

これにより、両方の画像間の距離が10％に保たれます

于 2013-03-02T03:49:21.873 に答える
0

2 行に折り返す例を次に示します。

http://jsfiddle.net/6PQy5/3/

#header_title {
    width: 561px;
    height: 248px;
    margin-top: 175px;
    float: left;
}
#interface {
    min-width: 100px;
    width: 338px;
    height: 315px;
    margin-top: 165px;
    float: right;
}

画面外にスクロールする例を次に示します。

http://jsfiddle.net/6PQy5/4/

#header_images {min-width: 920px;}
于 2013-03-02T04:21:56.633 に答える