絕對定位問題

我正在嘗試爲我的網站編寫一些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; 
}

來源

2011-12-20 Vecta

你試過把標誌<h1>下方，將其定位爲正常的網站，讓它在手機中低於？然後，您可以刪除手機的position:absolute:，並讓它落在正常位置。

來源

2011-12-20 21:20:17 danferth

使用絕對定位將使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/

來源

2011-12-20 21:20:19

絕對定位問題

回答

相關問題