簡體   English   中英

並排顯示兩個帶有figcaptions的圖形

[英]Display two figures with figcaptions side by side html5

我在制作帶有無花果字幕的2x2圖片庫時遇到問題。

我想要這樣的東西:

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

但是我得到的是:

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

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

當附加了注釋注釋標簽時,將圖形顯示為塊似乎沒有幫助。

另一個問題是,Id希望它仍然能夠像原始標簽那樣在較小的屏幕上堆疊到1x4。

將圖像放入容器<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM