html - 并排显示两个带有 figcaptions 的数字 html5

Question

我在制作带有无花果标题的 2x2 图片库时遇到问题。

我想要这样的东西：

-----   -----
|   |   |   |
-----   -----
Text    Text
-----   -----
|   |   |   |
-----   -----
Text    Text

但我得到的是：

-----
|   | 
-----
Text

-----
|   | 
-----
Text
etc...

附加 figcomment 标记时，将数字显示为块似乎没有帮助。

另一个问题是，我希望它仍然能够像原始标签那样在较小的屏幕上堆叠到 1x4。

Answer 1

将您的图像放入容器中<div>并使用@media 查询来设置容器的宽度。将图像<div>宽度设置为与图像相同的宽度。您将需要调整宽度设置以适合您的特定图像。

请参阅jsfiddle的示例。

<style>
    .container{width:600px;}
    .photo{width:80px; font-size:80%; text-align:center; vertical-align:top; display:inline-block;}

    @media screen and (min-width: 160px) {
    .container{width:160px;}
    }
    @media screen and (min-width: 240px) {
    .container{width:240px;}
    }
    @media screen and (min-width: 640px) {
    .container{width:400px;}
    }
</style>

<div class="container">
    <div class="photo">
        <img src="image.jpg" />
        This is the caption
    </div>
.
.
.
</div>