我正在建立图片库,但遇到了问题。如果图像标签的长度都相同,则它们将完美对齐,但是如果标签长于一行,它将向上推动图像,而不是在下方创建更多空白。我怎样才能解决这个问题?

我希望图像全部对齐到一行,文本从此处向下对齐。

我尝试将其放入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/

10-12 02:54
查看更多