Question

我有一个网站（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屏幕上查看时，图像会被推到标题上，将其隐藏起来。

重做标头以停止此操作的最佳方法是什么？

Answer 1

我建议最好的做法是将标志放在网站的900px宽度内。

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

Answer 2

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

无缝缩放的网站标题在iphone上。

2 个答案: