1

イチジクのキャプションを使用して 2x2 の画像ギャラリーを作成する際に問題が発生しています。

私はこのようなものが欲しいです:

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

しかし、私が得るものは次のとおりです。

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

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

figcomment タグが付けられている場合、図をブロックとして表示しても効果がないようです。

もう 1 つの問題は、未加工のタグのように、小さな画面で 1x4 にスタックできることです。

4

1 に答える 1

0

イメージをコンテナー内に配置し、 <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>
于 2013-03-22T13:10:18.603 に答える