※考えている構想
画像が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
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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>
No.1
- 回答日時:
メッセージを回り込ませる書式指定
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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
掲示板を作成しておりアップロ...
-
wordpressでキャプション内で改...
-
htmlの文字が縦書きになる
-
質問1.
-
タグは大文字と小文字どちらが...
-
画像の場合のみ、下線を消す方...
-
Macで画像の切り抜きできないの?
-
CSSがなぜかfont-sizeだけ効か...
-
リストの並べ替え
-
table で画像をピッタリとくっ...
-
ボタンを横に並べて表示させる方法
-
div要素が重なってします
-
親要素・子要素
-
HTML属性での「""」 「''」違い
-
CSSでボックスのheightが0になる
-
HRタグ 枠線を透明にするには?
-
HTMLは、シングルクォートかダ...
-
<ul><li></li></ul>にするメリ...
-
なぜ?マウスオーバーで1pt位置...
-
プルダウンメニューの背景色を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
掲示板を作成しておりアップロ...
-
wordpressでキャプション内で改...
-
js、 jQuery の手直しを助けて...
-
着せ替え画像の表現方法
-
どこをテーブルで作るべきか、d...
-
ASP.NETでの縦・横スク...
-
NN4.78が途中までしか読...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
div要素が重なってします
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
リストマーカーをボックス内に...
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
<h1>、<h2>と<p><div>の行間を...
-
css初心者 フレックスボックス...
-
ボタンをセル内一杯に表示させ...
おすすめ情報