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中的图像对齐问题

回答

相关问题