我正在建立图片库,但遇到了问题。如果图像标签的长度都相同,则它们将完美对齐,但是如果标签长于一行,它将向上推动图像,而不是在下方创建更多空白。我怎样才能解决这个问题?
我希望图像全部对齐到一行,文本从此处向下对齐。
我尝试将其放入jsfiddle中,但是由于任何原因我无法使其正常工作……这是HTML制作的
<div class="thumbrow">
<div style="min-width:400px;" class="thumbrow">
<div style="width:100px;" class="thumbs">
<div style="width:100px;" class="imgbox">
<a target="_blank" title="Hydrangeas" rel="lightbox[test]" href="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/Hydrangeas.jpg">
<img width="100" height="75" src="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/thumbs/Hydrangeas.jpg">
</a>
</div>
<p>Hydrangeas</p>
</div>
<div style="width:100px;" class="thumbs">
<div style="width:100px;" class="imgbox">
<a target="_blank" title="Chrysanthemum" rel="lightbox[test]" href="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/Chrysanthemum.jpg">
<img width="100" height="75" src="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/thumbs/Chrysanthemum.jpg">
</a>
</div>
<p>Chrysanthemum</p>
</div>
<div style="width:100px;" class="thumbs">
<div style="width:100px;" class="imgbox">
<a target="_blank" title="Lighthouse" rel="lightbox[test]" href="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/Lighthouse.jpg">
<img width="100" height="75" src="http://jacobraccuia.com/test/wp-content/uploads/gallery/test/thumbs/Lighthouse.jpg">
</a>
</div>
<p>Lighthouse</p>
</div>
</div>
</div>
和CSS
.thumbgal .thumbs {
float: left;
margin: 0 5px;
}
.imgbox {
position: relative;
text-align: center;
}
.thumbrow {
float: left;
overflow: hidden;
}
.thumbs p {
font-size: 12px;
line-height: 16px;
word-wrap: break-word;
}
请帮助:D
最佳答案
如果您不需要显示图像的全文,则快速解决此问题的方法可能是将文本设置为一定的宽度,并在溢出时添加省略号。
这将代替折断单词来包装它,并将标签的高度保持为一行。
.thumbs p {
font-size: 12px;
line-height: 16px;
width: 100px; /* Some width */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
编辑:仔细观察,从给出的代码开始。我试了一下,对我来说很好用。我只是在
.thumbs
中添加了一个浮点数和一些边距。 http://jsfiddle.net/nKkWX/关于html - 仅在高度变化时将图像垂直对齐到图库底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15261641/