Question

我正在尝试为我的网站编写一些CSS，以便它可以很好地显示jQuery mobile但我在重新定位一些元素时遇到了一些麻烦。

在我的常规网站中，徽标显示在<h1>元素之前。但是，在移动网站中，我将<h1>设置为通过绝对定位显示为标题正下方的标题。这可以正常工作，直到你来到一个更长的<h1>的页面，该页面落在移动屏幕上的第二行。这会扩展标题div，但不会将徽标div向下推。也许我说这一切都错了，但我不确定如何解决这个问题。

这是一个jsFiddle示例：http://jsfiddle.net/fvJQL/

HTML：

<div id="logo">
<img id="logo-img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/120px-Littlebluedog.svg.png" alt="dog">
</div>

<h1 id="header-text">All About Dogs All About DogsAll About DogsAll About DogsAll About DogsAll About DogsAll About Dogs</h1>

CSS：

#header-text {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 10px;
    border: 1px solid #000;
    width: 100%;
}

#logo {
    width: 100%;
    height: 100px;
    text-align: center;
    margin-top: 40px;
}

Answer 1

您是否尝试将徽标放在<h1>下方并将其定位到普通网站并将其放在移动设备的下方？然后你可以删除移动设备的position:absolute:，让它落到正常的位置。

Answer 2

使用绝对定位将使H1独立于其他元素。

只需将文字放在图像上方，如果文字转到第二行，它就会将其他元素向下推。

标记

<h1 id="header-text">All About Dogs All About All About Dogs All AboutAll About Dogs All AboutAll About Dogs All About</h1>
<div id="logo">
  <img id="logo-img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/120px-Littlebluedog.svg.png" alt="dog">
</div>

CSS

 #header-text {
 margin:0;
 display:block;
 text-align: center;
 padding: 10px;
 border: 1px solid #000;
 width: 100%;
}

#logo {
 width: 100%;
 height: 100px;
 text-align: center;
 margin-top:0px;
}

希望它保存：http://jsfiddle.net/fvJQL/8/

绝对定位麻烦

2 个答案: