CSSで段組をしようと思うのですが、うまくいかないのでご教授下さい。
左と右にボックスを配置し、それぞれにテキストが入ります。
中のテキストは量がまちまちだったり、大きさが可変であったりするのですが、
文字の量・大きさに関わらず、左と右のボックスの下辺が同じになるように、
つまりボックスの高さは、常に両方が同じになるようにしたいのです。
テーブルタグでの段組であれば、
セルに文字を入れておけば自動的にこういう状態になりますが、
CSSのボックスでは、どちらかの量が少なければ、
少ない方の下辺が上がってしまい、高さが揃いません。
CSSの本を何冊か買って読んではみましたが、
こういう場合、heightを数値で指定してしまっている場合が多く、参考になりませんでした。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
左右のボックスの高さを揃えるというのではなく、そのように見せるのであれば、左右のボックスを囲むボックスを作成し、左右の背景色または罫線を1枚の画像(高さ1pxの横長の画像)として作成し、背景画像とします。
例えば左側のボックスの幅が200px、右側が400pxとして、1px×600pxの画像の左から200px分を左側のボックスの背景色、残りを右側のボックスの背景色に塗りつぶし、GIF画像とし、左右のボックスを囲むボックスの背景画像として縦方向リピートで指定します。
<div style="width:600px;background:url(background.gif) 0 0 repeat-y;">
<div style="width:180px;padding:10px;float:left;">
<p>左のボックス</p></div>
<div style="width:380px;padding:10px;float:right;">
<p>右のボックス</p></div>
<div style="clear:all;"><img src="background.gif" style="width:600px;height:1px;border-none;"></div>
</div>
左右のボックスを囲むボックス内の最後でフロート解除を忘れずに。
それぞれのボックスを罫線囲みにしたい場合は、背景画像にそれぞれの左右の罫線位置に罫線の幅分の罫線色の部分を作り、上下の罫線は左右のボックスを囲むボックスのborder-top、border-bottomで指定します。
ご回答、ありがとうございました。
うまくいきました!
ここ最近ずっとこれで悩んでいたので、大変助かりました。
記述が、他に比べるとシンプルなのも嬉しい所です。
やっぱり、尋ねてみるもんですネ。
改めて、ありがとうございました。
No.1
- 回答日時:
実質的なブロックの高さをコントロールするには現状では仕様・ブラウザの実装状況の問題があって、
CSSを使うよりテーブルに頼った方が現実的ですが、見た目をそれっぽくする方法ならばいくつかあるようです。
http://allabout.co.jp/internet/hpcreate/closeup/ …
ご回答、ありがとうございました。
そのページは実は以前から知っていました(^_^;
ページの通りにやってみたこともあったのですが、私の環境がおかしいのか?
うまくいかなかったので、ここで質問してみようと思い立ちました。
でも、あのサイトはいろいろ参考になる所ですよね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Excel(エクセル) ログインIDの一発入力? 5 2023/07/07 12:30
- Excel(エクセル) エクセル シート内のボックスを縦並びから横並びに 7 2023/04/05 04:28
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- 数学 数独の解法についてお聞きします 4 2023/05/25 17:15
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Word(ワード) ワード2019で、テキストボックスの位置を、左右の真ん中にする方法 1 2022/09/21 13:49
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
W3Cのソースコードの検証サービ...
-
CSSで画像を同じ位置に重なり合...
-
画像内リンクについて
-
CSSがなぜかfont-sizeだけ効か...
-
CSSで背景色を下まで表示させたい
-
定義リストに下線をつけたいと...
-
z-indexで上になっている要素だ...
-
CSS:animation開始位置の設定
-
IEだとdivが横に並びません
-
画像と一緒にスライドするリン...
-
divの入れ子が上手くいきません。
-
htmlでのfloatを解除すると 親...
-
セル内のリンク文字を中央に配...
-
widthやheightの数値に単位(px...
-
Safariで、Textareaのボーダー...
-
CSSで左に画像、右にテキストを...
-
ul/liタグでのリスト表示におけ...
-
レスポンシブコードの意味なの...
-
CSS(0の単位)について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
表示倍率を変えるとレイアウト...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
【HTML】【CSS】【Swiper】 元...
おすすめ情報