Question

我需要在Zurb Foundation Block Grid中安排动态数量的图像，每张图片都有不同长度的标题。

我想知道是否有任何方法可以调整所有内容：

Image Diagram

我已经能够对齐所有内容：jsfiddle

ul.block-grid li {
    display: inline-block;
    float: none;
}

ul.block-grid li img {
    vertical-align: baseline;
    width: 100%;
    max-width: 100%;
}

但我无法弄清楚如何实现我想要的对齐方式。我已经尝试过绝对定位字幕，但随后它们失去了它们的宽度和高度（当然在DOM中的位置）：jsfiddle

ul.block-grid li p.caption {
    position: absolute;
}

实现这种对齐的任何提示都非常受欢迎。

Answer 1

可以通过绝对定位来实现。这里的标题是你的标题的可变高度......你需要在包含的行元素上应用适当的底部边距，否则标题将重叠在它们下面的任何内容。

JS Fiddle Demo

仅更改了以下选择器...

ul.block-grid li {
    position: relative;
    display: inline-block;
    float: none;
}

ul.block-grid li a {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
    max-width: 100%;
}

.caption {
    position: absolute;
    top: 100%;
}

回答你关于尝试绝对定位的二级问题以及丢失它的位置的文本。绝对定位在我的示例中起作用的原因是因为我将<li>元素设置为position: relative;这意味着具有绝对定位的LI的任何子元素将相对于<li>和与<body>无关。

Answer 2

您还可以使用 CSS表格实现此布局，如下所示。

如果 HTML 如下所示：

<div class="row full-width">
    <div class="columns small-12">
        <ul class="block-grid small-block-grid-5">
            <li>
                <a href="#">
                    <img src="http://placehold.it/300x400" />
                    <p class="caption">Test caption</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/300x400" />
                    <p class="caption">A longer test caption...</p>
                </a>
            </li>
            ...
        </ul>
    </div>
</div>

应用以下 CSS ：

.row.full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
}
ul.block-grid li {
    display: inline-table;
    float: none;
}
ul.block-grid li a {
}
ul.block-grid li img {
    vertical-align: baseline;
    width: 100%;
    max-width: 100%;
}
ul.block-grid li p.caption {
    text-align: center;
}

你有足够好的语义HTML，所以有很多元素可供使用。

在.block-grid包含的块中，在display: inline-table元素上设置li。

您可以将vertical-align值设置为baseline或bottom，然后根据需要调整子元素的边距和填充。

这个CSS似乎与Zurb基金会的课程相得益彰。

请参阅演示：http://jsfiddle.net/audetwebdesign/H5RLG/

设计评论：如果您的标题过长，则任意两行项目之间会有超大的空白区域，但您始终可以将最大高度添加到{{1}并启用垂直滚动。或者，使用JavaScript / jQuery，并有一个可展开的面板，其中包含＆＃34; Show More＆＃34;按钮。

在Firefox中，生成的布局如下所示：

enter image description here

是否可以在底部对齐图像并在顶部对齐标题？

2 个答案: