Question

我们的组织在内容管理系统中工作，出于加速原因，我们使用表格排列图片。我想摆脱这种做法，并提供一个路线图（CSS）来正确地做到这一点。

我们将图片并排排列，图片下方有标题，通常是两行文字。

这是我开始构建的一个例子。

<style>

 #piccaption
 {
font-size: x-small;
 }

 #picimages
 {
 text-align:center;
 margin:0px auto; 
 }

#picimages a
{
margin:0px 0px;
display:inline-block;
text-decoration:none;
color:black;
}

</style>

将此用于我的HTML ...

<div id="picimages">
<img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" />
<div id="piccaption"><span>Picture Caption</span><br />
<span>Second Line</span></div>
</div>
</div>

有人可以帮助我以正确的方式做到这一点，并在第一张照片旁边放置第二张，第三张照片，并在照片之间添加漂亮的填充物吗？

谢谢，

戴夫

Answer 1

水平放置多个块的简单方法是将显示设置为内联块，两边都有边距，以便按照您喜欢的方式对其进行间隔。 Inline-block适用于Internet Explorer 8及更高版本的所有浏览器（如果您确实需要使其与Internet Explorer 7兼容，则可以在内联块之后添加*display: inline。）

使用内联块而不是浮点数的优点是，即使图像具有特别长的标题，布局也不会像浮点一样破坏。

此外，请确保对页面上出现多次的元素使用类而不是ID。

以下是基于您粘贴的代码的jsFiddle示例：http://jsfiddle.net/skymaiden/zvpHW/

CSS水平图像与图像标题对齐

1 个答案: