为什么我的图片无法正确对齐?

时间:2017-12-10 15:48:06

标签: html image alignment

我试图让3个图像彼此相邻,每个图像之间有一个小空格,我发现代码在线,它与示例代码一起工作,但它对我不起作用?在浏览器中,图像放在另一个上面,两者之间有很大的间隙。

   <?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head><title>pizza</title></head>

<body>
<h1 align="center"><font color="red" face="calibri">buy one get one free </font></h1>
<p align="center"><font color="black" face="calibri">order online for discount <span style="coloryellow">extra toppings,</span><span style="color:green"> stuffed crust</span> and<span style="color:green"> call now</span></font></p>
<br></br>
<br></br>
<div>
  <img src="pcrt1.png"></img>
  <img src="pcrt2.png"></img>
  <img src="pcrt3.png"></img>
   </div>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

2 个答案:

答案 0 :(得分:0)

我认为CSS可以解决问题。

您是否尝试过添加样式属性?

<style>
img{
  float: left;
  margin-right: 1px;
}
</style>

答案 1 :(得分:0)

分配&#34;框&#34;对每个图像进行分类并添加此css。由于尺寸较大,请确保您的大图像不会自动对齐,因此您只需添加图像的高度即可正常工作。

.box {display: inline-block;
width: 150px;
height: 150px;
margin: 10px;}