2017-12-10 10 views
0

私はお互いに隣り合った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> 
+0

シークレットはCSS - と呼ばれます。これはあなたのhtml要素の振る舞いをスタイルするために使用されます。 –

+0

CSSについて聞いたことがありますか? – Nacho

答えて

0

私はCSSがトリックをすると思います。

あなたはスタイル属性を追加しようとしましたか?

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

各画像に「ボックス」クラスを割り当て、このCSSを追加します。大きな画像が大きなサイズのために自動的に位置合わせされないようにしてください。正しく動作させるには、画像の高さを加えなければなりません。

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

こんにちは、あなたの入力のおかげで、私はXSLスタイルシートを使用して、私はちょっと私はコードを追加する他の提案で混乱している? – hmtl

関連する問題