html中的圖像對齊問題

我使用具有標題和正文的html創建一個小頁面。標題位於具有藍色背景的標記內。html中的圖像對齊問題

我面臨的問題是一個圖像（android.png），我想在頭的右端顯示好像被放置在標題下方。我怎樣才能將圖像放在標題的右側。

我不想用CSS來對齊圖像。

點擊運行代碼片段，查看當前頁面佈局

<html> 
 
<body> 
 

 
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3""> 
 
    <img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> 
 
    <div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div> 
 
    <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png"> 
 
</div> 
 

 
<div style="width:400px;height:400px;border:1px solid blue"> 
 
<p> 
 
Hey,<br> 
 
I am on vacation. I will respond after i come back</p> 
 

 
<i><p>Sent from gmail</p></i> 
 
</div> 
 
</body> 
 
</html>

來源

2015-04-05 Psypher

還不是最主要的，但是：你有兩個收盤'「」'而不是單'「' – 2015-04-05 03:45:49

我覺得這樣做你以後。頭內，您的文字格中填寫寬度的其餘部分，推動第二圖像到下一行：

<html> 
 

 
<body> 
 

 
    <div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"> 
 
    <img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> 
 
    <div style="font-size:20px;color:white; text-align:left; float:left"> 
 
     <h3>Something</h3> 
 
    </div> 
 
    <img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png"> 
 
    </div> 
 

 
    <div style="width:400px;height:400px;border:1px solid blue"> 
 
    <p> 
 
     Hey, 
 
     <br>I am on vacation. I will respond after i come back</p> 
 

 
    <i><p>Sent from gmail</p></i> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-04-05 03:51:51 sideroxylon

jsBin demo

學習使用<style> 。讓生活更輕鬆，更多時間與朋友一起喝咖啡。

浮法圖像向右
但也因爲H3被默認塊元素浮動它向左（以除去寬度）

<p>不應被封閉在<i>因爲段落是block級元素和i是inline

<style> 
     .float-left{ float:left;} 
     .float-right{float:right;} 

     #header{ 
      width:400px; 
      height:60px; 
      border:1px solid blue; 
      background-color:#2196F3; 
     } 
     #header img{ 
      height:50px; 
     } 
     #header h3{ 
      font-size:20px; 
      color:white; 
     } 
     #content{ 
      width:400px; 
      height:400px; 
      border:1px solid blue; 
     } 
    </style>

HTML

<div id="header"> 
     <img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> 
     <h3 class="float-left">Something</h3> 
     <img class="float-right" src="http://www.sona-systems.com/img/android.png"> 
    </div> 

    <div id="content"> 
     <p> 
      Hey,<br> 
      I am on vacation. I will respond after i come back 
     </p> 
     <p><i>Sent from gmail</i></p> 
    </div>

另一種解決辦法是將您的圖像權H3元素中

<h3><img> Some Text <img></h3>

，但比你需要與H3的line-height播放和圖像的vertical-align等

來源

2015-04-05 03:55:23

我解決了這個問題（它還是會需要一些刷牙，但它的工作原理）通過切換代碼中<div>帶有「某些東西」的位置和混亂的圖像。取而代之的

<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div> 

<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">

做

<img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height--> 

<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>

也有一些錯誤的雙引號在這一行

來源

2015-04-05 03:56:09 michaelpri

既然你想避免CSS，我會假設這是用於輸出到HTML殘疾的電子郵件客戶端，如Outlook。

您可以通過之前簡單地移動第二圖像HTML中第一個使用圖片上的CSS做到這一點沒有。

<html> <body> <div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3""> <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png"> <img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png"> <div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div> </div> <div style="width:400px;height:400px;border:1px solid blue"> <p> Hey,<br> I am on vacation. I will respond after i come back</p> <i><p>Sent from gmail</p></i> </div> </body> </html>

來源

2015-04-05 04:00:33

如果他要創建一個HTML電子郵件，比他應在第一次使用TABLE地方，和正確的標題和maaaaany其他*正確的*東西。 – 2015-04-05 04:01:50

同意，一直在那裏做！ – 2015-04-05 04:02:33

謝謝..這只是一個開始，很多更正要做！ – Psypher 2015-04-08 17:37:47

html中的圖像對齊問題

回答

相關問題