智能手機上的Html header奇怪位置

-1

我目前正在研究我的第一個響應式網站，我也希望在智能手機上看起來不錯。我的問題是圖片/標誌放在線下，標題放在線上（請參閱下圖）。這可能怎麼做？智能手機上的Html header奇怪位置

HTML：

<body> 
<div class="header"> 
    <img src="Image link"/> 
    <h3>Title</h3> 
    <div class="navbar"> </div> 
</div 
</body>

CSS：

body,html { 
margin: 0; 
background-color: #fff; 
font-family: Verdana, Georgia, serif; 
font-size: 14px; 
overflow-x: hidden; 
} 



.header { 
margin: 0; 
background-color: #363636; 
height: 6em; 
text-align: left; 
font-size:150%; 
} 

.header img { 
margin-left: 3em; 
max-height: 4em; 
max-height: 4em; 
height:auto; 
display:inline;  

position: relative; 
top: 25%; 
-webkit-transform: translateY(+25%); 
-ms-transform: translateY(+25%); 
transform: translateY(+25%); 
} 

.header h3{ 
text-decoration: none; 
color: #fff; 
display: inline; 
font-size: 250%; 
text-align: left; 
font-family: "Century Gothic"; 
margin: 0; 
margin-left: 1em; 
margin-top: 0; 
position: relative; 
top: -50%; 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 
min-width: 500px: 
} 

.header h3 a{ 
color: #fff; 
}

目前會是什麼樣頁像智能手機（HTC Desire HD的：480×800）：

它應該是什麼樣子：

它目前看起來如何在PC上。

來源

2015-08-27 RasmusGP

您的CSS與所有親屬，百分比偏移和翻譯有些混亂（爲什麼這麼做？）。將元素放在一起的最簡單的方法是浮動，但記住你必須清除它們。下面是一些基本的，你可以建立在：

body,html { 
    margin: 0; 
    background-color: #fff; 
    font-family: Verdana, Georgia, serif; 
    font-size: 14px; 
    overflow-x: hidden; 
} 

.header { 
    margin: 0; 
    background-color: #363636; 
    height: 6em; 
    text-align: left; 
    font-size:150%; 
} 

.header:after { 
    content:''; 
    clear:both; 
} 

.header img { 
    margin-left: 3em; 
    max-height: 4em; 
    height:auto; 
    display:block; 
    margin-top:1em; 
    float:left; 
} 

.header h3 { 
    text-decoration: none; 
    color: #fff; 
    font-size: 250%; 
    text-align: left; 
    font-family: "Century Gothic", 
    "Gill Sans", Arial, serif; 
    margin: 0; 
    margin-left: 1em; 
    margin-top: 0.7em; 
    float:left; 
}

來源

2015-08-27 07:37:10 kersjous

這看起來像答案... upvoted .. –

完美的作品，在探索，Chrome和我的手機。這是我的問題的答案。我知道我的代碼非常混亂，我只是嘗試了不同的東西，直到它看起來像我想要的，我需要更深入地思考我想:) – RasmusGP

在這裏，我想這是你想要的

body,html { 
 
    margin: 0; 
 
    background-color: #fff; 
 
    font-family: Verdana, Georgia, serif; 
 
    font-size: 14px; 
 
    overflow-x: hidden; 
 
} 
 

 

 

 
.header { 
 
    margin: 0; 
 
    background-color: #363636; 
 
    height: auto; //changed 
 
    text-align: left; 
 
    font-size: 150%; 
 
    line-height: 60px; //changed 
 
    padding-bottom: 1em; //changed 
 
} 
 

 
.header img { 
 
\t margin-left: 3em; \t 
 
\t max-height: 4em; 
 
\t max-height: 4em; 
 
\t height:auto; 
 
\t display:inline; \t 
 
\t 
 
\t position: relative; 
 
    top: 25%; 
 
    -webkit-transform: translateY(+25%); 
 
    -ms-transform: translateY(+25%); 
 
    transform: translateY(+25%); 
 
} 
 

 
.header h3{ 
 
\t text-decoration: none; 
 
\t color: #fff; 
 
\t display: inline; 
 
\t font-size: 250%; 
 
\t text-align: left; 
 
\t font-family: "Century Gothic", 
 
    "Gill Sans", Arial, serif; 
 
\t margin: 0; 
 
\t  margin-left: 1.2em; //changed 
 
\t margin-top: 0; 
 
\t position: relative; 
 
\t top: -50%; 
 
\t -webkit-transform: translateY(-50%); 
 
\t -ms-transform: translateY(-50%); 
 
\t transform: translateY(-50%); 
 
\t min-width: 500px: 
 
} 
 

 
.header h3 a{ 
 
    color: #fff; 
 
}

<body> 
 
    <div class="header"> 
 
    \t <img src="https://www.taskers.com/images/labels/500x500w/Natural%20Beige%20301%20(1500%20x%201500)-c44a470ba740c7e1e7bae946387be713.jpg"/> 
 
    <h3>Title</h3> 
 
    <div class="navbar"> </div> 
 
    </div 
 

 
    
 
     </body>

在這裏，我剛剛更新了你的代碼演示

Check out demo

來源

2015-08-27 07:30:32

這不回答，這是不是在響應中all..neither臺式機或mobile..please檢查在FF和鉻太。 –

剛剛測試過它，並且在瀏覽器中看起來不錯，但在移動設備上，圖像在頁面的一半處移動。 – RasmusGP

@RasmusGP，你的代碼在Chrome和Firefox中有不同的視圖。 –

智能手機上的Html header奇怪位置

回答

相關問題