- ベストアンサー
こんな表示はできそうですか？縦詰め→横回り込み
- 縦詰め→横回り込みの表示方法について質問です。
- 横600 × 縦700の枠内に、横200 × 縦可変のボックスを敷き詰めたいです。
- 敷き詰め方は縦方向に行い、700を超えると右へずれて新たな行に配置したいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じまでしか出来ませんでした Firefoxで確認してみてください。 まず現状Firefoxではすべてのカラムが均等に配置されちゃうようなので 縦700pxがうまったらズレる指定が出来ないです（safariならok） 縦700pxを3カラム分埋まる量のテキストが入ると高さが伸びます。 縦に埋まったら横にズレる仕様上、スクロールバーが表示されるハズもないのでこうなるんですけど ここらへんは、j-mikaさんがどんな風に想像してたか（もしくは想定もしてなかったか）で感じ方が変わるのかな <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>マルチカラムレイアウト練習</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- #wrap { border:1px solid #d8d8d8; width:600px; min-height:700px; /* firefox */ -moz-column-count: 3; -moz-column-rule: 1px solid #d8d8d8; -moz-column-gap: 1em; /* safari（IE6・スレイプニル・ファイアフォックスと言われてるので関係なしですが） */ -webkit-column-count: 3; -webkit-column-rule: 1px solid #d8d8d8; -webkit-column-gap: 1em; } img { float:left; padding:1em; } --> </style> </head> <body> <div id="wrap"> <div class="box"> <p><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="" />ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> </div> <div class="box"> <p><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="" />いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div class="box"> <p><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="" />うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</p> </div> <div class="box"> <p><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="" />ええええええええええええええええええええええええええええええええええええええええええええええええええええ</p> </div> <div class="box"> <p><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="" />おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</p> </div> </div> </body> </html>
お礼
ぃやったー！！ ありがとうございます。ありがとうございます。 100回言っても足りません。 もう。もぅ 魔法です！ サファリ最高～♪ 基、salonpath様が最高です。 とっても、想像通りでした。 最初、divごとずらす事を考えてたんですが、こっちの方が 完全な敷き詰めになるので、よさそうです。 （もし、divごとずらす事が簡易なら、ここよ～と教えて頂けると ありがたいです。） 本当にありがとうございます。 投稿してからWEBを放浪して、すっかりこんな時間です。。 しょうがなく、jsでheightを取って計算しようかなと思ってた所でした。
補足
色々、見てみてます！ FireFoxですが、存在する画像だと、表示されるみたいでした。 -webkit-column-count -moz-column-count を初めて知りました。ありがとうございますっ あと、完全にheight:700pxで設定すると、右に大きくなったので、 外側にDIVつけて、オーバーフローで消しました♪ ～～ div .cl { width: 600px; height:600px; -moz-column-count: 3; -webkit-column-count: 3; } </style> </head> <body> <div style="overflow:hidden; height:600px; width:600px;"> <div class=cl> ～～ 頑張ります♪