例えば、下のURLサンプルでは、単にforeachで画像を並べただけですが、これを列を指定して「３列」などで並べたいと思っています。
http://www.phppro.jp/school/mashup/vol4/2
ネット調べたらこんな感じ？で書かれているものもあったのですが、もっと簡単に出来ないのかなーと思ったりしています。
<table>
<?php foreach (array_chunk($values, 2) as $row) { ?>
<tr>
<?php foreach ($row as $value) { ?>
<td><?php echo htmlentities($value); ?></td>
<?php } ?>
</tr>
<?php } ?>
何かシンプルで良い方法は無いものでしょうか？ご教授いただけましたら幸いです。
No.1
2625
1149
230pt
実現方法にもいろいろありますので、まずはリンク先のコードを少しだけ改造するという方向で回答を考えてみました（テストはしていません）
【１】全ての画像の幅が決まっている場合
例えば画像の幅が100pxだとすれば下記のようなスタイルを追加するだけで横３列になります
div.photozou { width:350px; }
HTMLでは「他の要素との余白（margin：マージン）」や「内部要素との余白（padding：パディング）」などが存在するため、単純に３倍の300pxでは思い通りの動作にならないため、大雑把に「画像３枚分以上、３枚分以下の数値」としてざっくりとですが350pxとしてあります
【２】画像の幅がそれぞれ違う場合
（ａ）とにかく３つずつ並べば良いという場合
レイアウトをしているとは言えないので参考にもなりませんが質問文中のものよりは短くなります
<?php foreach (array_chunk($values, 2) as $row) { foreach ($row as $value) { echo htmlentities($value); } echo '<br />'; } ?>
（ｂ）３つをきれいに並べたい
質問文にあげておられるようにTABLEタグを使うという手が古くから使われていますが、現代では「レイアウトのためにTABLEタグを使うことは非推奨」となっており、HTML+CSSで実現するべきこととされています
div.photozou { width:350px; } span.photozou { width:100px; }
foreach ($xml->info->photo as $photo){ $ret .= '<a href="' . $photo->url . '">'; $ret .= '<span class="photozou">'; $ret .= '<img src="' . $photo->thumbnail_image_url . '" alt="' . $photo->photo_title . '">'; $ret .= '</span>'; $ret .= "</a>\n";
No.1
26251149
ここでベストアンサー
230pt
実現方法にもいろいろありますので、まずはリンク先のコードを少しだけ改造するという方向で回答を考えてみました（テストはしていません）
【１】全ての画像の幅が決まっている場合
例えば画像の幅が100pxだとすれば下記のようなスタイルを追加するだけで横３列になります
div.photozou { width:350px; }
HTMLでは「他の要素との余白（margin：マージン）」や「内部要素との余白（padding：パディング）」などが存在するため、単純に３倍の300pxでは思い通りの動作にならないため、大雑把に「画像３枚分以上、３枚分以下の数値」としてざっくりとですが350pxとしてあります
【２】画像の幅がそれぞれ違う場合
（ａ）とにかく３つずつ並べば良いという場合
レイアウトをしているとは言えないので参考にもなりませんが質問文中のものよりは短くなります
<?php foreach (array_chunk($values, 2) as $row) { foreach ($row as $value) { echo htmlentities($value); } echo '<br />'; } ?>
（ｂ）３つをきれいに並べたい
質問文にあげておられるようにTABLEタグを使うという手が古くから使われていますが、現代では「レイアウトのためにTABLEタグを使うことは非推奨」となっており、HTML+CSSで実現するべきこととされています
div.photozou { width:350px; } span.photozou { width:100px; }
foreach ($xml->info->photo as $photo){ $ret .= '<a href="' . $photo->url . '">'; $ret .= '<span class="photozou">'; $ret .= '<img src="' . $photo->thumbnail_image_url . '" alt="' . $photo->photo_title . '">'; $ret .= '</span>'; $ret .= "</a>\n";
とても素晴らしい回答で満足しました！
具体的なやり方もわかって、とても良かったです。
ありがとうございました。
No.3
53175
100pt
TABLEタグは使わないでCSSを使うほうが簡単になります。
３列に並べたいのなら、float:left指定で横並びでDIVで並べることです。
で３個毎に clear:bothを行って改行すれば、１つのループだけで簡単にできますよ。
イメージとしてはこんな感じです。
48
45
<?php
$i=0;
foreach ($xml->info->photo as $photo){
echo quot;<div style='float:left;'>";
echo "<img src=''/>"; //画像表示
echo "</div>"
$i=$+1;
if($i % 3){ //３枚に改行
echo "<div style='both:clear;'></div>";
}
}
?>
こんなに簡単な方法もあるんですね。
とても勉強になりました。
ありがとうございました。
2
1
1
1
1
とても素晴らしい回答で満足しました！
具体的なやり方もわかって、とても良かったです。
ありがとうございました。