人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートにおける「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つ目のブロックには短い記事が入っております。
それぞれのブロックの頭を揃えたいのですが・・・もし、情報が足りなければ申し訳ないのですが、ブロックが揃わない際の考えられる原因と、対処法がありましたら、教えていただきたい次第です。
よろしくお願いします。

1304356194
●拡大する

●質問者: moon-fondu
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:つの スタイルシート ブロック リンク 対処
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● うぃんど
●100ポイント ベストアンサー

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">
◎質問者からの返答

うまくいきました!

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

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


2 ● pretaroe
●5ポイント

body {

vertical-align:top;

}

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

無理なら、

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

◎質問者からの返答

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


3 ● htn777
●5ポイント

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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ