이미지 링크 3 개 나란히 나란히 표시

Question

내 웹 사이트에 나란히 표시하려고하는 이미지가 3 개 있습니다. 그들은 내가 연구하고 배웠으며 읽은 방식으로 서로 수직으로 쌓아 올렸습니다. 이건 내가 원하는 건 아니야.

제 질문은 어떤 종류의 html 또는 css가이 작업을 수행 할 수 없습니까?

내 CSS :

#imagestyle { 
width:100%; 
text-align:center; 
padding:5px; 
} 
span { 
display:inline-block; 
margin:5px; 
} 

내 HTML :이 알아낼 수 없습니다

<div id="imagestyle"> 
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater.jpg"><img alt="Kayak Whitewater rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater-150x150.jpg" width="150" height="150" /></a> 
<p>Kayak</p> 
</span> 
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater.jpg"><img alt="Rafting Whitewater" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater-150x150.jpg" width="150" height="150" /></a> 
<p>Inflatable Raft</p> 
</span> 
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater.jpg"><img alt="Paddleboard Whitewater Rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater-150x150.jpg" width="150" height="150" /></a> 
<p>Paddleboard</p> 
</span> 
</div> 

. 어떤 도움이라도 대단히 감사하겠습니다.

http://www.dutchjohnresort.com/rafting/ 또한 도움이되는 경우 웹 사이트입니다. 사전에

감사합니다!

편집 : 여기에 입력 한 코드는 모두 내 사이트에서 복사 한 내용입니다. 나는 그것이 어떻게 다른지 모른다. 대답 해 주셔서 감사합니다. 나는 청소 작업을하고 도움이되는지 확인합니다.

Answer 1

사이트에 코드를 일치하지 않는 귀하의 질문에 게시 코드 경우 : 당신은 당신이 게시 된 코드를 사용하는 경우 @Jasper가 가리 켰을 때,

, 완벽하게 작동합니다 jsfiddler 데모에서

Answer 2

코드가 잘 작동하는 것으로 보입니다. 귀하의 웹 사이트에는 <span> 태그 하나에 모두 3 개의 이미지가있어 inline-block으로 취급됩니다. 과 실제 사이트에 코드를 바꿉니다 : 도움이

<div id="imagestyle"> 
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater.jpg"><img alt="Kayak Whitewater rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater-150x150.jpg" width="150" height="150" /></a> 
<p>Kayak</p> 
</span> 
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater.jpg"><img alt="Rafting Whitewater" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater-150x150.jpg" width="150" height="150" /></a> 
<p>Inflatable Raft</p> 
</span> 
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater.jpg"><img alt="Paddleboard Whitewater Rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater-150x150.jpg" width="150" height="150" /></a> 
<p>Paddleboard</p> 
</span> 
</div> 

희망을!

Answer 3

시도 범위 {float: left}. 말 작품