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

Question

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

Answer 1

这称为响应式设计。有几个框架可以做到这一点。我建议检查其中一些。我个人喜欢BootStrap CSS框架，他们的代码可以帮助你解决这个问题。

http://getbootstrap.com/

逻辑很可能会使用保证金。您也可以检查边距以及CSS布局。

Answer 2

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

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;
}

Answer 3

如果您想制作此功能，则意味着您正在寻找响应式设计。一种在网站大小发生变化时会改变页面外观的设计。

我的建议是使用响应式框架。有许多问题需要考虑，使用框架可以帮助你获得战利品！

以下是其中一些

• www.yamel.de
• foundation.zurb.com
• purecss.io