仅在高度不同时将图像垂直对齐到画廊底部

Posted 2023-03-06

【中文标题】仅在高度不同时将图像垂直对齐到画廊底部

【英文标题】：Vertically align images to bottom in gallery, only if the heights vary

【发布时间】：2013-02-22 02:06:17

【问题描述】：

我正在构建一个图片库，但遇到了问题。如果图像标签的长度相同，它们会完美对齐，但如果标签长于一条线，则会将图像向上推，而不是在下方创建更多的空白区域。我怎样才能解决这个问题？

我希望图像全部对齐一行，文本从那里向下对齐。

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

【参考方案1】：

如果您不需要显示图像的全文，则可以快速解决您的问题，可以将文本限制在一定宽度并在溢出时添加省略号。

这将代替打破单词来换行，并将标签的高度保持在一行。

.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/

【参考方案2】：

嗨，我认为你错过了在 .thumbs 中添加样式 检查 demo

.thumbs 
    float:left;
    margin-right:10px;

【讨论】：

与 ultranaut 的解决方案相同的问题。如果图片大小不同，则无法正确对齐。

您好。检查我的更新fiddle 如果我错了请纠正我，你想要实现的是图像的height 总是图像下方的text 总是与其他文本对齐我是对还是错？

我希望图像的高度从一个点全部对齐，多余的高度将所有图像向下推。在每个图像下方，我希望文本向下推以换行。因此，对于每个新图像，图像的底部和文本的顶部始终对齐。目前，要么文本将图像向上推，文本底部对齐，要么图像将文本向下推，图像顶部对齐。

是的，但是我原来的问题仍然存在，文本移动到新行时会将图像向上推。

我不确定，但我不认为用纯 css and html 实现你想要的只是也许你需要以太 jquery 或 javascript 的帮助

【参考方案3】：

将您的thumbs div 的display 值设置为inline-block 并将它们垂直对齐到顶部：

.thumbs 
  margin: 0 5px;
  display:-moz-inline-stack;
  display: inline-block;
  vertical-align: top;

小提琴here.

【讨论】：

如果图像尺寸不同，这对我没有帮助。我希望图像全部对齐到底部，并且文本直接在图像下方对齐，但向下推！