내 이미지가 올바르게 정렬되지 않는 이유는 무엇입니까?

각 이미지 사이에 작은 공백을 사용하여 서로 옆에 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>

출처

2017-12-10 hmtl

비밀은 CSS -. html 요소가 어떻게 동작하는지 스타일을 지정하는 데 사용됩니다. –

CSS에 대해 들어 보셨습니까? – Nacho

저는 CSS가 트릭을 수행 할 것이라고 생각합니다.

스타일 속성을 추가하셨습니까?

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

출처

2017-12-10 15:54:23 josephnicholas

각 이미지에 '상자'클래스를 지정하고이 CSS를 추가하십시오. 큰 이미지가 큰 크기 때문에 자동으로 정렬되지 않도록하십시오. 제대로 작동하려면 이미지의 높이를 추가해야합니다.

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

출처

2017-12-10 16:09:25

안녕하세요, 귀하의 의견을 주셔서 감사합니다, 나는 XSL 스타일 시트를 사용하고 있습니다, 나는 약간의 다른 제안에 의해 혼란스러워 어디에 내가 코드를 추가할까요? – hmtl

내 이미지가 올바르게 정렬되지 않는 이유는 무엇입니까?

답변

관련 문제