Question

我在制作带有图标题的2x2图片库时出现问题。

我想要这样的事情：

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

但我得到的是：

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

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

将图形显示为块似乎无助于附加图形图标。

另一个问题是，我喜欢它仍然可以像原始标签那样在较小的屏幕上堆叠到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>

显示两个数字与figcaptions并排html5

1 个答案: