画像幅で文字を折り返したい


↑こちらのサイトを参考に、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 ;

}

1 Like

こんにちは!

こちらの質問ですが、baserCMSの質問というよりはCSSの質問となってしまいます。
「画像幅」、「文字」、「折り返す」などのキーワードを組み合わせてGoogleなどの検索サイトで調べてみてください。今後もスタイルの調整が必要になってくるかと思いますので「まずは検索する」ということを試してみるといいかと思います。

また、CSSの基本についてはこちらのサイトなども参考にされてはいかがでしょうか。
http://www.htmq.com/

それでも分からなければQ&Aサイトのteratailを使ってみるのもいいかもしれません。
https://teratail.com/tags/CSS

3 Likes