掲示板のファイルアップロード数で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>
No.3ベストアンサー
- 回答日時:
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>
No.2
- 回答日時:
こんにちは
CSSを書き換えるのなら、いかようにもできると思います。
ご提示のソースでは何が画像で、何がテキストなのかはっきりしませんが、テキストの要素は一つだけのようなので・・・
・画像部分全体に包含要素を設けておいて、これをfloat:left。
・画像の個数によって、上記包含要素内でレイアウトを変更
することで実現できるのではないでしょうか?
簡単にやるなら、上記の設定で、画像が2個ならブロック要素として表示、3個ならインラインブロック(インラインでも可)として表示すれば、原理的にはご質問の並びになると思います。
この程度の違いなら、わざわざCSSを書き換えなくても、両方を用意しておいて、包含要素へのクラスの「付与/付与しない」で適用を変える方が簡単だとは思いますけれど。
もちろん、CSSの記述を変える方法でも、同程度の手間で可能でしょう。
一方で、各画像の幅とウィンドウ幅の関係によっては、画像表示で折り返しが発生する場合も想定されますので、その際にどのようなレイアウトにしたいのかによってもレイアウト方法は変わってくるでしょう。(発生するのは画像3個のケースだけですが・・)
bodyの最小幅を設定しておけば、折り返しを回避することはできると思われますが、それがご希望なのかどうかも不明ですし。
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% …
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つ回り込むような表示が実現できるかと思います。
回答ありがとうございます、質問が2点あるのですが、なぜ // 画像が3つの場合 のみ2つfloat:leftを指定するのでしょうか?
またbillboard_uploadFiles_areaとbillboard_toggle_targetで同じクラスで実装できない場合の構想が分からないのですが、<div class="billboard_toggle_target">でアップロードファイルとメッセージを囲ったあとにfloat:leftを指定するのではないのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- 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
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
透過PNGが透過されない!!
-
VBSの「MsgBox」について
-
MYSQLから、画像表示するには
-
phpで画像がどうしても文字化け...
-
ListViewコントロールでサムネ...
-
phpMyAdminに画像を保存できない
-
phpで画像を保存するときにリサ...
-
libpngでpng操作がうまくいかない
-
BLOBデーターの画像の表示方法...
-
画像リストを作りたい
-
ビットマップ画像を読み込むプ...
-
ファルダに画像をいれておいて...
-
imageフォルダに、画像をリサイ...
-
PHP+PostgreSQLを使ってPDFファ...
-
PHP GD 画像が縮小できない
-
拡張子php画像をjpg画像等に変...
-
最も速い画像合成処理を教えて...
-
フォントの色を変えるには?
-
PHPのWARNINGをcatchするには
-
onedrive にexcelファイルをア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBSの「MsgBox」について
-
拡張子php画像をjpg画像等に変...
-
透過PNGが透過されない!!
-
Illustratorで文字と画像を流し...
-
アップロード画像数でCSSを分け...
-
imageフォルダに、画像をリサイ...
-
PythonのTkinter詳しい方へ。画...
-
VBAでJPGサイズ変更
-
C# Excelファイルへの画像挿入。
-
ListViewコントロールでサムネ...
-
PHPで吐き出した画像にリンクを...
-
php,mysqlにて画像パス保存/表...
-
PHP+PostgreSQLを使ってPDFファ...
-
スマートフォンから画像のアッ...
-
画像にテキストを埋め込むジェ...
-
実行ファイル(exe)に画像ファ...
-
ビットマップ画像を読み込むプ...
-
改行コードのカウント
-
Ajaxで画像表示
-
画像アップロードのファイル名...
おすすめ情報