floatで段組。下を揃える。

前へ 次へ
このQ&Aのポイント
  • floatで段組を作成し、下を揃える方法についての質問です。
  • 過去の質問にはtableを使う方法がありますが、divとfloatでの方法を知りたいです。
  • 背景画像を設定した場合、下に同じ背景画像を表示しながら下を揃える方法はありますか。
回答を見る
  • ベストアンサー

float で段組。下を揃える。

いつもお世話になります。 +------+---------------+ |AAAA　|BBBBBBB　　　　　| |AAAA　|BBBBBBB　　　　　| |AAAA　|BBBBBBB　　　　　| |AAAA　|BBBBBBB　　　　　| +------+BBBBBBBBBB　　　| 　　　　　|BBBBB　　　　　| 　　　　　|BBBBBBBBBBBBB　| 　　　　　+---------------+ 半角スペースの関係で、形が崩れ、申し訳ありません。 過去ログを調べたところ。 http://oshiete1.goo.ne.jp/qa1944867.html に、同様な質問がありました。 そして、 http://allabout.co.jp/internet/hpcreate/closeup/CU20050307A/index2.htm に、一つの解答がありました。 しかし、上記の解答ですと、 Ａブロックに背景画像を設定した場合、Ａブロックの下には、その背景を表示できません。 Ａブロックに背景画像を設定して、その下に同じ背景画像を表示しながら、下をＢブロックと揃えることはできないものでしょうか。 やはり、tableを使えば簡単でしょうが、div、floatで、できないものでしょうか。 よろしくお願いいたします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

ちょっと目的の状態にはならないかもしれないけれどtableを封印するならこんな感じ？ <div style="background-image:url('bg.gif')"> 　<div class="A">AAAA</div> 　<div class="B">BBBB</div> </div> つまりより外側で背景を指定するという話・・・。 この状態でAの方で height:100% だとうまくAで背景指定しても揃うかもしれないけれど試してないから判らないや・・・

rqg2010
質問者

お礼

SAYKAさん、お早うございます。 できました。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • この場合の正規表現を教えてください

    AAAA BBBBBBBBBBBBB BBBBBBBBBB... CCCCC DDDDDDDDDDDDDD... AとCの部分の文字列は決まっていて、BとDの部分はどのような文字列か（改行数も含めて）わかりません この場合でのAとCを含むAとCに囲まれたBの部分を正規表現で表すにはどう書けばいいんですか？ ↓この部分全体のことです AAAA BBBBBBBBBBBBB BBBBBBBBBB... CCCCC

  • CSSで、フレームを使ったようなメニューを作りたいのですが

    ＨＰ作り初心者です。ただいま、ＣＳＳを使用してのＨＰ作りに挑戦中です。 フレームを使ったＨＰでよく見るような、画面左側にメニュー、右側に本文という構成にしたいと思っています。 下記「All About」記事を参考に作ってはみたものの、 本文が長いのでスクロールするとメニュー部分が見えなくなってしまいます。 メニュー部分が常に画面上に表示されるように固定したいのですが、どうすればよいのでしょうか。 ご教授よろしくお願いします。 使用ソフト：TeraPadで直打ち。 確認ブラウザ：FireFox3.0.13とIE8.0。 CSS：外部ファイル。A.cssにページレイアウト、B.cssにメニュー部分の情報（文字サイズやリンク関連の装飾など）記載。 メニュー：ulとolタグ使用。 All About・CSSで段組構成　段の背景色が切れないようにする（前） ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/ All About・CSSで段組構成　段の背景色が切れないようにする（後） ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050401A/ All About・CSSで段組構成　隣の段が下に回りこむのを防ぐ ⇒http://allabout.co.jp/internet/hpcreate/closeup/CU20050307A/

  • はじめまして。

    はじめまして。 よろしくお願いします＾＾ 質問なのですが、 http://allabout.co.jp/internet/hpcreate/closeup/CU20050228A/ ここにある画像の「E本文」のところだけを、例えば掲示板など表示させたり、チャットなどを表示 させたりしたいのですが、どうやってやるのでしょうか？ 本文の場所以外は常に表示させて、E本文の位置だけを違うページに変えたいんです。 わかる方いましたら、教えてくださいおねがいします＞＜

    • 締切済み
    • CSS
  • 携帯サイトのプルダウンメニューでアンカーへリンク

    皆様、そうぞお力をかしてください。 携帯サイト(仮にaaaa.html)でプルダウンメニューでaaaa.htmlの中のアンカーポイントにリンクさせたいのですが、携帯ですのでjavaが使えませんのでフリーのcgiを使い(jump.cgi)ました。aaaa.htmlに下記のようなフォームを入れてみました。 <FORM ACTION="jump.cgi"> <SELECT NAME="jumpto"> <OPTION VALUE="aaaa.html.html#a1">1</OPTION> </SELECT> <INPUT TYPE="submit" VALUE="移動"> </FORM> しかし「not　found」になってしまいます。 このaaaa.html.html#a1の#a1をとるとちゃんと表示できるのですが…。 aaaa.html.html#a1のまま実行するとブラウザのURLの末尾がaaaa.htmll%23a1となっています。 http://allabout.co.jp/computer/hpcreate/closeup/CU20020331A/jump.cgi.txt のcgiを使わせていただきました。そして http://allabout.co.jp/computer/hpcreate/closeup/CU20020331A/index2.htm のページを参考にさせていただきました。 解決方法のわかる方どうかアドバイスよろしくお願いいたします★

    • ベストアンサー
    • HTML
  • スタイルシートで段組

    <div id="content">content</div> <div id="left">left</div> <div id="right">right</div> <div id="header">header</div> 上記並び順でHTMLソースを記入し、表示方法は下記のようにしたいと考えています。ページ幅は750pxです。 ------------------------- header(width:750px) ------------------------- left(150px) content(450px) right(150px) ------------------------- スタイルシートは普段あまり使ったことがないため、http://allabout.co.jp/internet/hpcreate/closeup/CU20041115A/index2.htm このようなサイトを見ながら勉強しながらやっていますが、わかりません。この場合はどのようにスタイルシートを記述すればいいのか、教えていただけないでしょうか。宜しくお願いします。

  • CSSで縦三段レイアウトにして、HTML上では真ん中部分を最初に表示

    皆様よろしくお願い致します。 http://allabout.co.jp/internet/hpcreate/closeup/CU20041115A/ このように左、中、右で表示させる場合は cssの使い方によってhtmlでは右を一番最初に表示させる事も可能なのは知っているのですが、 seo対策として「上、中、下」のcss縦三段レイアウトで「中」をhtml上では一番最初に表示させたいのですが可能でしょうか？

    • ベストアンサー
    • CSS
  • ＣＧＩについて

    お忙しいところ、申し訳ないのですがお力をお貸し下さい。ホームページの「Copyright」を自動的に更新できるようにしたいと思い、色々と探しました。「オールアバウト」に説明してある記事【 http://allabout.co.jp/internet/hpcreate/closeup/CU20061101A/index3.htm 】があり、なんとか自力でと試したのですが、書いてある方法がよく理解できません。 初心者でも、実行できるように教えて頂けないでしょうか？宜しくお願いします。

  • ランダムに画像を表示

    http://allabout.co.jp/computer/hpcreate/closeup/CU20030721A/index2.htm ↑ここのソースを使ってみたのですが、 画像のところに「×」がでて画像が表示されません。 パスはちゃんと指定してるんですが・・・。 なぜでしょうか？

    • ベストアンサー
    • HTML
  • マージンのマイナスのバグ

    http://allabout.co.jp/internet/hpcreate/closeup/CU20060427A/index2.htmでマージンのマイナスをつかったボックスの作り方が載っていますが、エクスプローラーでこの部分をそのまま使ってもボックスのラベルの上の部分が表示されません。ＦＩＲＥＦＯＸではちゃんと表示されているようですが、エクスプローラーでなんとか表示させることはできないでしょうか？

  • フレームの下に文字が隠れてしまいます…

    横2分割した画面を作っています。 左にはメニューを出すんですが、このメニューは 画像の上にカーソルを合わすと項目が右側に出てくる ポップアップメニュー？です。 --------------------- |　　AAA　　　|　aaaa　| --------------------- 　　　　　　　|　bbbbb　| 　　　　　　　---------- こんな感じでしょうか… フレームの区切り位置をAAAとaaaaの間にすると AAA側でカーソル合わせたときにaaaa側が 右フレームの下に消えてしまいます。 フレームの上に出すことは可能でしょうか？ 色々試して、 フレームをまたいで画像を出すことは出来たんですが IEとNN両方対応しないといけないので却下されました… 参考ページでも良いのでよろしくお願いしますｍ（＿＿）ｍ

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する