绝对定位故障
绝对定位故障
提问于 2011-12-21 04:58:53
我正在尝试写一些CSS为我的网站，以便它将很好地显示与jQuery移动，但我有一些问题，重新定位一些元素。
在我的普通站点中，徽标出现在<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;
}回答 2
Stack Overflow用户
发布于 2011-12-21 05:20:17
你有没有试过把徽标放在<h1>下面，把它放在普通网站上，让它落在移动设备的下面？然后你可以移除移动端的position:absolute:，让它正常地落在它应该落的地方。
Stack Overflow用户
发布于 2011-12-21 05:20:19
使用绝对定位将使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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8581891
复制相关文章
相似问题
腾讯云开发者
