1

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

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

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

在此处输入图像描述

4

3 回答 3

0

嗨，我认为您在.thumbs 检查 演示中添加样式是错误的

.thumbs {
    float:left;
    margin-right:10px;
}
于 2013-03-07T02:30:07.633 回答
0

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

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

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

于 2013-03-07T02:01:47.607 回答
0

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

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

在这里拉小提琴。

于 2013-03-07T02:42:38.070 回答