1304356194 スタイルシートにおける「floatしたdivの高さを揃える方法」について、質問があります。

下記リンクには、「floatしたdivの高さを揃える方法」について、詳しい説明がされております。
http://blog.livedoor.jp/friendly_rium/archives/51767173.html
http://scuderia-web.com/tips/xhtml_css/equal_box_heights.php
float云々というかむしろ、

ブロック要素の回り込み
http://www.1uphp.com/con2/layout/float.html

のリンクの方が近い気がするのですが、2つのブロック要素の頭の高さが揃わないのです(>_<)
スタイルシートを使って頭を揃えるには、どうすればよいのでしょうか?
ちなみに、2つのブロックのfloat要素には、どちらもleftを指定しております。

ちょうど、添付ファイルのように、div属性を持つ2つのブロックが今あります。
一つ目のブロックに長い記事が入っており、2つ目のブロックには短い記事が入っております。
それぞれのブロックの頭を揃えたいのですが・・・もし、情報が足りなければ申し訳ないのですが、ブロックが揃わない際の考えられる原因と、対処法がありましたら、教えていただきたい次第です。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/05/03 02:09:57
  • 終了:2011/05/09 01:01:31

ベストアンサー

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/03 12:05:24

ポイント100pt

divではなくtableのtd内に配置しているのが原因ですね

 

不要なタグが残っていたりもしますので全面的に手直ししたほうがいいと思いますが、

とりあえず最小限の手直しだと下記の2箇所の修正になります

修正前 <td><div id="block2">
修正後 <td style="vertical-align:top"><div id="block2">
修正前 <td><div id="block3">
修正後 <td style="vertical-align:top"><div id="block3">
id:moon-fondu

うまくいきました!

余白が少し出来てしまいましたが、スタイルシートのfloat属性をinheritからleftに統一することで、完全に揃えることが出来ました!

ありがとうございます(^_^;)

2011/05/09 00:45:50

その他の回答(2件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/03 12:05:24ここでベストアンサー

ポイント100pt

divではなくtableのtd内に配置しているのが原因ですね

 

不要なタグが残っていたりもしますので全面的に手直ししたほうがいいと思いますが、

とりあえず最小限の手直しだと下記の2箇所の修正になります

修正前 <td><div id="block2">
修正後 <td style="vertical-align:top"><div id="block2">
修正前 <td><div id="block3">
修正後 <td style="vertical-align:top"><div id="block3">
id:moon-fondu

うまくいきました!

余白が少し出来てしまいましたが、スタイルシートのfloat属性をinheritからleftに統一することで、完全に揃えることが出来ました!

ありがとうございます(^_^;)

2011/05/09 00:45:50
id:pretaroe No.2

pretaroe回答回数531ベストアンサー獲得回数752011/05/03 13:15:23

ポイント5pt

body {

vertical-align:top;

}

body全体に上寄せしていしてみては?

無理なら、

全体をdivで囲って、そのdivに上よせ指定する

id:moon-fondu

うーん、どこのコードをいじればよいかわかりませんでして・・・

2011/05/09 00:59:35
id:htn777 No.3

htn777回答回数14ベストアンサー獲得回数02011/05/03 18:35:08

ポイント5pt

難しいことがわからないのなら

同じ大きさになるようにダミーの画像を2つめにも入れる

透過PNGなどにすれば透けるのでわからないでしょう。

id:moon-fondu

ダミーの画像、透過PNGですか~難しそうですね~やってはみたいですが(>_<)

2011/05/09 00:59:06
  • id:rouge_2008
    上2つのリンク先は、各ボックスの高さを揃える方法です。
    3番目のリンク先にあるように指定すれば、特に何もしなくても各ブロックの頭は揃うはずです。
    上手くいかないのでしたら、現在のHTMLとCSS、それから問題が発生するブラウザを教えてください。
  • id:moon-fondu
    すみません、うまく行かなくて・・・問題は、firefox、chrome、explorer全てで発生しておりまして、floatなどもleftを指定しているのですが、うまくいきません(>_<)
    問題のページは、
    http://firestorage.jp/download/a0f71e34c5c04f3d99de1e99ab7e12771d44a22a
    にアップしたテキストファイルの中に書いてあります。
    もしよろしければ、お手数おかけいたますが、ご回答いただければ幸いです。
    よろしくお願いします。
  • id:moon-fondu
    みなさんご回答をありがとうございます!
    今、ホームページ作成ソフトを使えない状況でして・・・7日の土曜日に確認し、必ず返事いたしますのでもう少々お待ちください。
    遅くなってすみませんが、よろしくお願いします<m(__)m>

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

トラックバック

  • 人力検索へのフォロー id:moon-fondu さんの下記質問への雑談 http://q.hatena.ne.jp/1304356194 原因と最小限の改造で対処する方法は回答に書いたので、全面的に見直しをかける場合の例を下に残して
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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