↑こちらのサイトを参考に、floatを使いキャプション付き画像を並べたのですが、
キャプションが長くなる場合、並びが崩れてしまいます。
この時、画像幅で文字を折り返すためにはどうしたらいいでしょうか。
ご回答よろしくお願いいたします。
■HTML
<
div
class
=
"imagearea"
>
<
figure
><
img
src
=
"summerriver.jpg"
alt
=
"写真"
><
figcaption
>キャプション1</
figcaption
></
figure
>
<
figure
><
img
src
=
"summerriver.jpg"
alt
=
"写真"
><
figcaption
>キャプション2</
figcaption
></
figure
>
<
figure
><
img
src
=
"summerriver.jpg"
alt
=
"写真"
><
figcaption
>キャプション3</
figcaption
></
figure
>
: : :
</
div
>
■CSS
figure {
float
:
left
;
/* 左に寄せて後続を右に回り込ませる */
margin
:
0px
7px
7px
0px
;
/* 外側に余白を加える(右に7px・下に7px) */
background-color
:
#ccc
;
/* 背景色 */
}
figure img {
display
:
block
;
/* 余計な余白が出ないようにする */
margin
:
0px
0px
3px
0px
;
/* 下側にだけ3pxの余白を追加 */
}
figcaption {
font-size
:
0.9em
;
/* 文字サイズを90%に */
text-align
:
center
;
/* 中身をセンタリング */
}
div.imagearea:after {
content
:
""
;
/* ※Clearfix */
clear
:
both
;
display
:
block
;
}