1326028565 cssについて質問させていただきます。


現在画像投稿サービスを開発中なのですが
http://pinterest.com/
このサービスのように縦幅が異なる形でもうまくfloatさせてキレイに並べることができず苦戦しています。
(横幅は統一サイズです)

添付のような形なのですが、
ソースもできたものではなく、恐縮なのですがどなたか参考サイトかソースをご提示いただけると大変助かります。

どうぞよろしくお願いいたします。

対応ブラウザは IE7以上、FF、chrome、safariの最新版に近いくらいのモノで見えるようにしています。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/01/08 22:16:08
  • 終了:2012/01/09 11:53:25

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/01/09 00:48:21

id:kuso47

お返事ありがとうございます。2つ目のグリッドレイアウトが使いやすそうなので利用してみます。

2012/01/09 11:49:34

その他の回答(2件)

id:kodairabase No.1

kodairabase回答回数661ベストアンサー獲得回数802012/01/08 23:19:38

縦の列ごとにfloatでdivタグを並べればいいと思います。
つまり、以下のような感じで。

<div>
    <div>A</div>
    <div>E</div>
</div>
<div>
    <div>B</div>
    <div>F</div>
</div>
...

段組みレイアウト【float】:CSS入門

http://kumacrow.blog111.fc2.com/blog-entry-293.html

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/01/09 00:48:21ここでベストアンサー

id:kuso47

お返事ありがとうございます。2つ目のグリッドレイアウトが使いやすそうなので利用してみます。

2012/01/09 11:49:34
id:taroe No.3

taroe回答回数1099ベストアンサー獲得回数1322012/01/09 01:29:38

ポイント50pt

縦横比が異なる画像もきれいにタイル状にしてくれるjQueryプラグイン
http://creatorish.com/weblog/172


jQueryを使うのが一般的ですよ

IEを含めた場合、質問例のような感じのものはCSSだけで実現しだすと
はまりますよ。

id:kuso47

ありがとうございます。Cherenkovさんのjqueryのほうからテストしてみたいと思います。

2012/01/09 11:52:58
  • id:windofjuly
    うぃんど 2012/01/08 22:58:31
    質問文で例に挙げているサイトはJAVAScriptで動的に入れ込んでますね

    HTML+CSSだけでやるなら、DIVを横に4つ並べて、
    左から順にそれぞれ下記のDIVを入れ子にするのが楽でしょう
    AとE
    BとF
    C
    D

    個人的にはあのような構成は見づらくて嫌いですし、
    そのためにスクリプトを使ったりして、
    クライアントのリソースを食うことにも反対だったりします
    (重いページはんたーーーい サクサクなページだーーーい好き)
  • id:windofjuly
    うぃんど 2012/01/09 00:02:34
    またまた意地汚いポイントハンターが現れたので、
    メッセージ送信で画像をお望みの形に並べるヒントを送っておきました
    (今日もやられた例 http://q.hatena.ne.jp/1325423117 )

    メールか、はてなメッセージで確認してくださいな
    http://m.hatena.ne.jp/
  • id:kuso47
    いつもすみません、ありがとうございます。現在はPC用のプロモページを開発していまして、そのために今回のレイアウトがほしかったのです。Cherenkovさんのjqueryとあわせてテストしてみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません