掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します

※考えている構想
画像が1つの場合は画像の横にメッセージが並び、画像を超える場合は下に回りこむ。

画像が2つの場合は画像が2つ縦に並び、画像の横にメッセージが並び、画像を超える場合は下に回りこむ。

画像が3つの場合は画像が2つ横に並び、3つめの画像は下に回り込み、3つめの画像の横にメッセージが並び、画像を超える場合は下に回りこむ。

※参考デザイン
https://i.imgur.com/Ca1oKUC.jpg

※並べたい画像コード

<div class="billboard_article_area">
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#1</label> -->
<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#2</label> -->
<div class="viewer"><?php echo $view[1]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#3</label> -->
<div class="viewer"><?php echo $view[2]; ?></div>
</div>
<div class="billboard_text_area">
<!-- <label>内容</label> -->
<p class="firstlyText"><?php echo $row['message']; ?></p>
</div>

<div class="billboard_title_item">
<div class="billboard_userstamp_area">
<input type="radio" value="<?php echo $row['stamp']; ?>" id="stamp" disabled><label for="stamp"></label>
</div>
<div class="billboard_author_area">
<!-- <label>名前</label> -->
<h2><?php echo $row['namae']; ?></h2>
</div>
</div>

※現在のファイル
https://wandbox.org/permlink/4U4SeicL3vPyG8GX

No.2 回答者： Ogre7077 回答日時： 2023/07/18 22:59

float 指定をする対象要素は

個々の画像を囲む <div> 要素ではなく、
それらを囲む新しい <div> 要素を一つだけ作り、
要素内では画像を縦表示させつつ
要素外では文章を回り込ませましょう

デザインが画像の数で別れるなら、
判定条件は画像の数を使うしかないでしょう

この回答へのお礼

回答ありがとうございます、前述のアドバイスを見落としておりました申し訳ありません。

新たにクラスを追加して画像をメッセージを囲うようにしたのですが、文章の回り込みがうまく機能しておりません…
原因は分かりますでしょうか？

※メッセージ回り込みコード(機能していない)
div#billboard_toggle_target::after{ content:""; display:block; clear:both; }

※画像縦表示
<div id="billboard_toggle_target">

div#billboard_toggle_target {
float: left;
}

※現在のHTMLコード
<div class="billboard_article_area">
<div id="billboard_toggle_target">
<div class="billboard_uploadFiles_area">
<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<div class="viewer"><?php echo $view[1]; ?></div>
</div>
<div class="billboard_text_area">
<p class="firstlyText"><?php echo $row['message']; ?></p>
</div>
</div>
</div>

お礼日時：2023/07/19 00:46

No.1 回答者： Ogre7077 回答日時： 2023/07/18 10:46

メッセージを回り込ませる書式指定

https://developer.mozilla.org/ja/docs/Web/CSS/fl …
https://developer.mozilla.org/ja/docs/Web/CSS/cl …

画像を縦に並べて横にメッセージを回り込ませる例
<style>
.box .pic { float:left; }
.box::after { content:""; display:block; clear:both; }
</style>
<div class=box>
<div class=pic><p><img><p><img></div>
<div class=msg><p>メッセージ<p>メッセージ<p>メッセージ</div>
</div>

画像の数でだいぶデザインが違うので、
画像が1つの場合のデザインと、
画像が2つの場合のデザインと、
画像が3つの場合のデザインを、
それぞれ別々に行って
php の if 文で分岐させて HTML 出力しましょう

この回答へのお礼

アドバイスありがとうございます。質問がありまして、
画像が2つの場合のデザインの場合は縦に並べたいのですが、float:left;で指定すると横に並んでしまいます。こちらを対策することは可能でしょうか？

もう1点アドバイスを頂きたいのですが、php の if 文で分岐させて HTML 出力する場合、画像数で分岐するのが良いでしょうか？

画像を縦に2つ並べてその横にメッセージ、画像の高さを超えた場合下に回り込むようにしたいです。
スタンプと名前は画像とメッセージの下に横並びにする予定です。

※参考画像
https://imgur.com/YbHUSaZ.jpg

※該当コード
<div class="billboard_article_area">
<div id="billboard_toggle_target">
<div class="billboard_uploadFiles_area">
<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<div class="viewer"><?php echo $view[1]; ?></div>
</div>
<div class="billboard_text_area">
<p class="firstlyText"><?php echo $row['message']; ?></p>
</div>
</div>

<div class="billboard_userstamp_area">
<input type="radio" value="<?php echo $row['stamp']; ?>" id="stamp" disabled><label for="stamp"></label>
</div>
<div class="billboard_author_area">
<h2><?php echo $row['namae']; ?></h2>
</div>
</div>

※アドバイスをもとに設定したcss
.viewer {
float: left;
}

お礼日時：2023/07/18 21:53