0

次のヘッダーを持つ Web サイト ( http://ukchina-trading.com/ ) があります。

HTML

        <div class='leftImage'>
            <img src='image/unionjack.png'>
        </div>
        <div class='title'>
            <h1>J Plus Trading</h1>
            <h2>Briding the gap between China and the UK</h2>
        </div>
        <div class='rightImage'>
            <img src='image/chinawings.png'>
        </div>

CSS

.title h1 {
    font-family: 'Droid Serif', Georgia, Times, serif;
    text-align: center;
    font-size: 68px;
    line-height: 65px;
    padding-top: 60px;
    margin-bottom: 80px;
}

.title h2 {
    font-family: 'Droid Serif', Georgia, Times, serif;
    text-align: center;
    position:relative;
    top:-88px;
    left:3px;
    font-size: 16px;
    color: #FF3300;
}
.rightImage {
    position:absolute;
    right: 150px;
    top: 2px;
}

.leftImage {
    position:absolute;
    left: 150px;
    top: 2px;
}

Web サイトをコンピューターで表示する場合、ヘッダーは問題ありませんが、iPhone の画面で表示すると、画像がタイトルの上に押し出されて非表示になります。

これを停止するためにヘッダーをやり直す最良の方法は何ですか?

4

2 に答える 2

0

最善の方法は、フラグをウェブサイトの幅 900px 内に収めることです。

それらを「J Plus Trading」テキストの左右に配置しますが、絶対配置ではなくフロートを使用してください。

于 2012-12-24T10:33:08.923 に答える
0

問題は、使用している絶対配置です。これにより、ページ上の他のものに関係なく、画像が同じ位置に配置されるためです。絶対的な代わりに float:left; を使用してみてください。および float:right を左と右の画像に追加すると、テキストがその上に押し込まれることはありません。画像が希望どおりに配置されるように、マージンまたはパディングを含む追加の div を作成する必要がある場合があります。

于 2012-12-24T10:33:40.137 に答える