画像の下に文字を回り込ませたい

CSSの記述について質問です。
カラムを横並びにしたいのですが、文字を画像下に回り込ませるにはどうしたらいいのでしょうか。

display : block;
が効かないのはなぜでしょう…

【見本↓】

【自分↓】

html
1        <div class="bicycle">
2            <h2>Bicycle</h2>
3            <div class="con">
4                <img src="img/bicycle1.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
5                <div class="con2">
6                    <h3>タイトルタイトル</h3>
7                    <p>テキストテキストテキスト</p>
8                </div>
9
10                <img src="img/bicycle2.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
11                <div class="con2">
12                    <h3>タイトルタイトル</h3>
13                    <p>テキストテキストテキスト</p>
14                </div>
15                
16                <img src="img/bicycle3.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
17                <div class="con2">
18                    <h3>タイトルタイトル</h3>
19                    <p>テキストテキストテキスト</p>
20                </div>
21            </div>
22        </div>
23

CSS
1
2.bicycle .con{
3    display: flex;
4    justify-content: center;
5    align-items: center;
6}
7
8.bicycle .con2{
9    width: 268px;
10    display: block;
11} 
12
13.bicycle .con2 h3{
14    font-size: 16px;
15    font-weight: 700;
16    line-height: 120%;
17    margin-top: 20px;
18}
19
20.bicycle .con2 p{
21    font-size: 14px;
22    font-weight: 400;
23    margin-top: 10px;
24}
25

退会済みユーザー

2021/05/27 23:01

table を使ってはどうでしょう？ (使わないのに何か理由があればともかく)

kumazou

2021/05/27 23:09

tableですね。そこは思いつかなかったです！メモしておきます( ..)φ ありがとうございました！

行動規範の内容に同意します

回答1件

ベストアンサー

con2は画像とテキストを括るようにします。

HTML
1        <div class="bicycle">
2            <h2>Bicycle</h2>
3            <div class="con">
4                <div class="con2">
5                    <img src="https://i.gzn.jp/img/2018/01/15/google-gorilla-ban/00.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
6                    <h3>タイトルタイトル</h3>
7                    <p>テキストテキストテキスト</p>
8                </div>
9
10                <div class="con2">
11                    <img src="https://i.gzn.jp/img/2018/01/15/google-gorilla-ban/00.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
12                    <h3>タイトルタイトル</h3>
13                    <p>テキストテキストテキスト</p>
14                </div>
15
16                <div class="con2">
17                    <img src="https://i.gzn.jp/img/2018/01/15/google-gorilla-ban/00.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
18                    <h3>タイトルタイトル</h3>
19                    <p>テキストテキストテキスト</p>
20                </div>
21            </div>
22        </div>

それだけでいいのですが、3つがくっついちゃうので、.con2 にmarginを設定してみました。これはお好みで。あとtext-alignも加えています。

CSS
1.bicycle .con{
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}
6
7.bicycle .con2{
8    width: 268px;
9    margin: 0px 10px;
10    text-align: center;
11} 
12
13.bicycle .con2 h3{
14    font-size: 16px;
15    font-weight: 700;
16    line-height: 120%;
17    margin-top: 20px;
18}
19
20.bicycle .con2 p{
21    font-size: 14px;
22    font-weight: 400;
23    margin-top: 10px;
24}