プロが教えるわが家の防犯対策術！

つらい・・・

アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。

解決済

掲示板のファイルアップロード数でHTMLクラスを変えずにCSSのみを変更して並び方を臨機応変に対応するように考えていて、

画像が3個の場合は2個横並び＋下に1個回り込み、その横に文字で実装できたのですが、
画像が2個の場合2個縦並び、その横に文字がどうしても上手くいきません…

どちらも同一クラスで実装することはできないのでしょうか？

<?php
// 使用する変数を空文字で初期化
$buafloatLeft = 'none'; // 画像が3つの場合のみ
if ($image_count = 1) {
// 1がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が3つの場合のみ
}
?>
<style>
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: <?php echo $btotafloatLeft; ?>;
}

.billboard_toggle_target {
float: <?php echo $buafloatLeft; ?>;
}
</style>
<div class="billboard_article_area">
<div class="billboard_toggle_target">
<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No2です。



画像3個の場合の、┏ 型配置の右下の部分にテキストを回りこませるか否かで若干変わりますが、画像の数が1～3個限定で良ければ、CSSを使い分ける必要も無く共通の設定だけで可能ですね。

※ 前回同様、div要素が画像（又は画像要素の包含要素）であるとして、以下はレイアウトの一例です。
※ 画像のサイズは、とりあえず適当に設定してあります。
※ 以下の例では、全体の表示幅を狭めてあります。
（短いテキストでも回り込みが発生するようにするため）


HTMLを簡略化してあるので、要領のみの例ですが、ご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 回り込みを起こさせるため幅を制限 */
body { width: 20em; }
/* DIVを画像に見立てる仮設定 */
.wrap .img {
width: 5.5em; height: 5.5em;
text-align: center; line-height: 5.5em;
font-weight: bold;
border: 1px solid #888;
background-color: #DFF;
margin: 1px;
}
h4 { clear: both; margin: 0; padding: 2em 0 0; }

/* 実際のレイアウト指定 */
.wrap > div.img{ float: left; }
.wrap > div.text { display: inline; }
.wrap > div:nth-last-child(2) { clear: left; }
</style>
</head>
<body>
<h4>◆ 画僧1個の場合</h4>
<div class="wrap">
<div class="img">画像1</div>
<div class="text">テキスト　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと</div>
</div>

<h4>◆ 画僧2個の場合</h4>
<div class="wrap">
<div class="img">画像1</div>
<div class="img">画像2</div>
<div class="text">テキスト　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと</div>
</div>

<h4>◆ 画像3個の場合</h4>
<div class="wrap" >
<div class="img">画像1</div>
<div class="img">画像2</div>
<div class="img">画像3</div>
<div class="text">テキスト　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと　あいうえお　かきくけこ　さしすせそ　たちつてと</div>
</div>

</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



CSSを書き換えるのなら、いかようにもできると思います。
ご提示のソースでは何が画像で、何がテキストなのかはっきりしませんが、テキストの要素は一つだけのようなので・・・

・画像部分全体に包含要素を設けておいて、これをfloat:left。
・画像の個数によって、上記包含要素内でレイアウトを変更
することで実現できるのではないでしょうか？

簡単にやるなら、上記の設定で、画像が2個ならブロック要素として表示、3個ならインラインブロック（インラインでも可）として表示すれば、原理的にはご質問の並びになると思います。
この程度の違いなら、わざわざCSSを書き換えなくても、両方を用意しておいて、包含要素へのクラスの「付与/付与しない」で適用を変える方が簡単だとは思いますけれど。
もちろん、CSSの記述を変える方法でも、同程度の手間で可能でしょう。

一方で、各画像の幅とウィンドウ幅の関係によっては、画像表示で折り返しが発生する場合も想定されますので、その際にどのようなレイアウトにしたいのかによってもレイアウト方法は変わってくるでしょう。（発生するのは画像3個のケースだけですが・・）
bodyの最小幅を設定しておけば、折り返しを回避することはできると思われますが、それがご希望なのかどうかも不明ですし。
    • good
    • 1
    • 件
通報する
この回答へのお礼

Q.ご提示のソースでは何が画像で、何がテキストなのかはっきりしませんが、テキストの要素は一つだけのようなので・・・

A.回答ありがとうございます、テキスト部分は下記になります。

<div class="billboard_text_area">
<!-- <label>内容</label> -->
<p class="firstlyText"><?php echo $row['message']; ?></p>
</div>

Q.画像部分全体に包含要素を設けておいて、これをfloat:left。
画像の個数によって、上記包含要素内でレイアウトを変更
することで実現できるのではないでしょうか？
bodyの最小幅を設定しておけば、折り返しを回避することはできると思われますが、それがご希望なのかどうかも不明ですし。

A.アドバイスありがとうございます。float:leftで画像を縦並びにはできたのですが、メッセージがどうしても画像の下に表示されてしまいます。
display: inline-block;を画像全体とメッセージに指定してみたのですが、どちらも効いていないようです。やはりクラスを変えるしかないのでしょうか…

画像の下にメッセージが回り込むようにしたいので折り返しでデザインを考えております。

※サンプルサイト
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab% …

通報する
お礼日時：2023/07/28 23:35

No.1

このコードを見ると、条件判定が間違っているように見えます。

条件判定の箇所を修正する必要があります。

以下のように修正してください：

php
Copy code
<?php
// 使用する変数を空文字で初期化
$buafloatLeft = 'none'; // 画像が3つの場合のみ
$btotafloatLeft = 'none'; // 初期値を設定

if ($image_count == 1) {
// 画像が1つの場合
$btotafloatLeft = 'left'; // 画像が1つの場合のみ
} elseif ($image_count == 2) {
// 画像が2つの場合
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($image_count == 3) {
// 画像が3つの場合
$buafloatLeft = 'left'; // 画像が3つの場合のみ
$btotafloatLeft = 'left'; // 画像が3つの場合のみ
}
?>
また、CSSのクラス名も修正して、billboard_uploadFiles_areaとbillboard_toggle_targetを同じクラスで実装することはできません。それぞれ別々のクラス名を指定する必要があります。

以上の修正を行うことで、画像が2つの場合は2つ縦並びに、画像が3つの場合は2つ横並び＋1つ回り込むような表示が実現できるかと思います。
    • good
    • 1
    • 件
通報する
この回答へのお礼

回答ありがとうございます、質問が2点あるのですが、なぜ // 画像が3つの場合 のみ2つfloat:leftを指定するのでしょうか？

またbillboard_uploadFiles_areaとbillboard_toggle_targetで同じクラスで実装できない場合の構想が分からないのですが、<div class="billboard_toggle_target">でアップロードファイルとメッセージを囲ったあとにfloat:leftを指定するのではないのでしょうか？

通報する
お礼日時：2023/07/28 19:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報