0

画像をキャプションと並べて配置しようとしています。

これは、デフォルトで次のように動作します。

<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<img src="2.jpg" width=320 height=240 alt="Image 2">
<img src="3.jpg" width=320 height=240 alt="Image 3">
<img src="4.jpg" width=320 height=240 alt="Image 4">
</figure>

幅が許すかどうかに応じて、画像のリストを並べて取得します。私は欲しいものを手に入れます。そのような2列の画像です:

Image 1 Image 2
Image 3 Image 4

次のようにfigcaptionを追加すると：

<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<figcaption>caption 1</figcaption>
<img src="2.jpg" width=320 height=240 alt="Image 2">
<figcaption>caption 2</figcaption>
<img src="3.jpg" width=320 height=240 alt="Image 3">
<figcaption>caption 3</figcaption>
<img src="4.jpg" width=320 height=240 alt="Image 4">
<figcaption>capton 4</figcaption>
</figure>

すべてが次のようになります。

Image 1
caption 1 
Image 2 
caption 2 
Image 3  
caption 3 
Image 4
caption 4

また、リストと階層とcssで遊んでいました。

問題は、次のようにするにはどうすればよいですか?

Image 1 Image 2 
caption 1 caption 2 
image 3 Image 4   
caption 3 caption 4

どうもありがとう、カロリス

4

1 に答える 1

1

まず、マークアップを修正する必要があります (フィギュアごとに 1 つのフィグキャプションのみが許可されます)。次に、ある種のコンテナ要素を追加する必要があります。コンテナーとして脇に置きましたが、適切と思われる任意のブロック レベルの要素 (div、セクションなど) にすることができます。

http://jsfiddle.net/ZksyN/2/

<aside class="figures">
<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<figcaption>caption 1</figcaption>
</figure>

<figure>
<img src="2.jpg" width=320 height=240 alt="Image 2">
<figcaption>caption 2</figcaption>
</figure>

<figure>
<img src="3.jpg" width=320 height=240 alt="Image 3">
<figcaption>caption 3</figcaption>
</figure>

<figure>
<img src="4.jpg" width=320 height=240 alt="Image 4">
<figcaption>capton 4</figcaption>
</figure>
</aside>

要素をインラインで表示するのに十分な CSS です。の左右のマージンを減らしたいと思うでしょうfigure。また、表示する必要がある列の数に関するあらゆる種類の制限を省略したため、デフォルトでレスポンシブです (幅の狭いデバイスは 1 列を取得し、非常に幅の広いデバイスは、収まる場合は 3 列または 4 列を取得できます)。列数に厳密な上限を追加する場合は、max-widthaside.figuresを (画像の幅 + サイド マージン) * 列数に等しくなるように追加します。

aside.figures {
    overflow: hidden; /* only needed if floating the child elements instead of using inline-block */
}

aside.figures figure {
    display: inline-block;
    border: 1px solid;
}
于 2012-12-07T15:22:34.450 に答える