并排显示3个图像链接

我在我的网站上显示3张图像，我试图并排显示。他们的研究和学习方式让他们垂直，堆叠在一起。这不是我要找的。并排显示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/是网站，如果有帮助。

在此先感谢！

编辑：我放在这里的所有代码是复制粘贴从我的网站。我不知道它有什么不同。谢谢你的答案。我会努力清理，看看是否有帮助。

来源

2014-01-29 DaSquid

上面的代码工作就像你想我相信：http://jsfiddle.net/KT3em/。由于您将容器元素设置为'width：100％'，因此您应该检查容器的父元素以确保它不会强制缩小布局。 – Jasper

oooo boy，我看了一下你的源代码，你的HTML结构是假的，这是你的整个问题。只需清理你的HTML。您在''标签之间有'
'标签，这些标签将强制新行......您也有嵌套不正确的标签。这使得浏览器渲染HTML的方式与预期不同。 – Jasper

回应您的编辑。如果您正在使用内容管理系统，那可能是您的问题。 WYSISYG编辑很多时候都会做出假设并更新您的HTML。例如。可能因为WYSISYG编辑器而添加'
'标签。 – Jasper

你张贴在你的问题并不在您的网站的代码相匹配的代码：

differences

如果您使用您发布的代码，它会很好地工作作为@Jasper露面在jsfiddler演示

来源

2014-01-29 20:08:10 Luis

这绝对是正确的答案。 OP在实际网站上的HTML与他发布的内容有很大的不同。 OP只需将代码粘贴到网站中即可使用。 – Jasper

@Jasper我必须检查他的网站，因为我通过在jsfiddle上使用'HTML标记'得到了和你一样的结果，2个演示不能是错误的/好的：D – Luis

您的代码似乎正常工作，在您的网站上，您有一个<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>

希望帮助！

来源

2014-01-29 19:56:15 Yuval

如果您正在描述网站上未在其代码中的内容，那么它们中没有内容，也没有结构目的。 – Yuval

DOM检查器将只显示一个''标签，但如果您查看网站的源代码，则会发现这仅仅是因为嵌套的HTML标签不正确。浏览器不会渲染一些不正确的嵌套标签，所以DOM检查器会在这种情况下错过我们。 – Jasper

-1

尝试span {float: left}。说，如果作品

来源

2014-01-29 19:56:32 adaniluk

这是一条评论，而不是答案。 – Jasper

并排显示3个图像链接

回答

相关问题