html - 如何用css制作底部有文字的动态图片框？

Question

我想在 css 中制作一个动态图片框，底部有文字，如下图所示。 动态我的意思是当我最小化窗口时它将在不同的行而不是在一长行中。 谢谢!

Answer 1

您可以使用带有居中对齐图像和文本的 float 容器。当您缩小视口(viewport)大小时，不适合新宽度的图像将移动到下方。

DEMO

HTML:

<ul class="container">
    <li><img src="" width="100" height="100" alt="" />Comment #1</li>
    <li><img src="" width="100" height="100" alt="" />Comment #2</li>
    <li><img src="" width="100" height="100" alt="" />Comment #3</li>
    <li><img src="" width="100" height="100" alt="" />Comment #4</li>
    <li><img src="" width="100" height="100" alt="" />Comment #5</li>
    <li><img src="" width="100" height="100" alt="" />Comment #6</li>
</ul>

CSS:

.container {
    overflow:hidden;
    list-style:none;
}

.container li {
    float:left;
    text-align:center;
    margin:0.4em;
}

.container img {
    display:block;
}