横並びにしたliの高さを揃える | 福井のホームページ制作・携帯サイト制作・SNS/ビジネスブログ構築 からくり屋のブログ
福井でホームページ制作・携帯モバイルサイト制作・SNS構築・ビジネスブログ構築・Webシステム構築をしているWebディレクターのブログ。 li を float:left で横並びにした場合、li の中の文章の量や画像の高さが違ってくると、綺麗に回り込みしてくれません。 これを綺麗に回り込みさせる場合、display:inline-block;を使用します。 inline-blockは、あまり知られていないマイナーなプロパティですが。。。 <!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="j
floatしたdivの高さを揃える « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
tableレイアウトからdivのfloatによるレイアウトに変更した際に、デザイン面で困ることがいくつかありますが、その1つが、floatしたdivの高さが揃わないこと。 floatしたそれぞれのdivに背景画像や背景色を設定していたり、borderでラインを入れている場合など、高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。 そういった問題を解決する方法です。 サンプル floatしたdivの高さを揃える 高さが可変（別ウィンドウで表示） floatしたdivの高さを揃える 高さ画面いっぱい（別ウィンドウで表示） ソース（高さが可変） floatされたdivの中で、もっとも高さがあるものに他のdivの高さも合わせる場合です。 float解除用のclass="cl"についてはfloat解除を参照してください。 html,body { margin: 0; paddin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascriptでコンテンツ（表示領域外に隠れたものも含む）全体の高さを取得したい « 未分類 « Fの視点
