こんな表示はできそうですか？縦詰め→横回り込み

解決済

質問者：j-mika
質問日時：2009/06/23 07:37
回答数：1件

こんにちは。どうも上手く考え付かないので・・・お助けを(TT;

内輪の物なので、クロスブラウザーの必要はありません。
環境はWINで、
IE6・スレイプニル・ファイアフォックス、何れかで表示が出来ればいいです。

横600　縦700の枠があります。

この中に、横200×縦可変のボックスを敷き詰めたいです。
（中身は、画像とテキストがあり、boxは今divで作ってますが、
実現できれば、なんでもいいです・・・）

そして、その敷き詰め方が・・・　縦！です。

縦方向に敷き詰め、700がうまったら（入らなくなったら）
右へずれて、また縦に敷き詰める。
（float の縦バージョンのような）

左から始まっても、右から始まってもOKです。

どうかお願いしますううううう

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： salonpath
回答日時：2009/06/23 09:22

こんな感じまでしか出来ませんでした

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-transitio …
<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">

</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>

この回答への補足

色々、見てみてます！
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>
～～
頑張ります♪

補足日時：2009/06/23 10:28

通報する

- 0
- 件

通報する

この回答へのお礼

ぃやったー！！

ありがとうございます。ありがとうございます。
100回言っても足りません。

もう。もぅ
魔法です！

サファリ最高～♪

基、salonpath様が最高です。

とっても、想像通りでした。

最初、divごとずらす事を考えてたんですが、こっちの方が
完全な敷き詰めになるので、よさそうです。
（もし、divごとずらす事が簡易なら、ここよ～と教えて頂けると
ありがたいです。）

本当にありがとうございます。

投稿してからWEBを放浪して、すっかりこんな時間です。。
しょうがなく、jsでheightを取って計算しようかなと思ってた所でした。