0

我有一个带有以下标题的网站（ 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;
}

当网站在计算机上查看时，标题很好，但在 iPhone 屏幕上查看时，图像被推到标题上，将其隐藏。

重做标题以阻止这种情况的最佳方法是什么？

4

2 回答 2

0

我建议最好的办法是将标志带入网站的 900 像素宽度内。

将它们放在“J Plus Trading”文本的左右两侧，但只使用浮动而不是绝对定位。

于 2012-12-24T10:33:08.923 回答
0

您的问题是您使用的绝对定位，因为这会导致图像处于相同位置，而与页面上的其他任何内容无关。而不是绝对尝试使用 float:left; 和 float:right 在你的左右图像上，这样文本就不会被推到它上面。您可能必须创建带有边距或填充的额外包含 div，以便图像按您想要的方式定位

于 2012-12-24T10:33:40.137 回答