1240324462 Divを使用したレイアウトがあるのですが、

崩れてしまうので悩んでいます。

説明が難しかったため、
画像の方で状況を記述いたしました。

Div(メイン部)、Div(サイド部)に分かれたDivレイアウトが、
同じ高さ、左右に分かれたDivレイアウトがあるのですが、

メイン height=800 サイド height=800
の状態から

メイン height=800↑ サイド height=800 のとき
枠線がズレしまいます。

したいことは
「メイン部と、サイド部の高さを、いかなる場合でも均等上手く均等に揃えたい
 (枠線の高さを揃えたい)」のです。

heightを%表示にしてみたりと、いろいろ試してみたのですが、
どうも上手く表示されず悩んでいます・・・汗

高の調整ができ、枠線が途切れないように
表示できるいい方法がないものでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2009/04/21 23:34:25
  • 終了:2009/04/27 18:07:52

ベストアンサー

id:M_tatsuki No.1

M_tatsuki回答回数13ベストアンサー獲得回数12009/04/22 01:33:32

ポイント25pt

画像がちょっと見えづらかったもので、意図するところと違っていたらご容赦ください。

左右のブロックの高さが違うときに、縦のラインが中途半端に切れてしまうのを何とかしたい、ということで受け取りました。

具体的な記述は省きますが、自分が良くやるのは

<div class="a">
<div class="b"></div> ←メイン
<div class="c"></div> ←サイド
</div>

としたとき、”a”に一番外の枠線を設定

”b”にサイドとの区切りのラインを設定します。

メインの内容が常にサイドより長くなるのが前提ですが。

或いは、幅固定なら”a”に縦のラインだけを背景画像として設定しちゃうというのもありますが・・・(^^;

id:workzaq1

ご回答頂きありがとうございます。


教えて頂いたこと試してみました。

すると、両端共に線が揃うのが見れて嬉しい限りです。


>メインの内容が常にサイドより長くなるのが前提ですが。

長くなる可変の部分にサイド設定するといいのですね。


>幅固定なら”a”に縦のラインだけを背景画像として設定

ありがとうございます、

そういう方法があるのですね^^;

2009/04/23 21:26:00

その他の回答(4件)

id:M_tatsuki No.1

M_tatsuki回答回数13ベストアンサー獲得回数12009/04/22 01:33:32ここでベストアンサー

ポイント25pt

画像がちょっと見えづらかったもので、意図するところと違っていたらご容赦ください。

左右のブロックの高さが違うときに、縦のラインが中途半端に切れてしまうのを何とかしたい、ということで受け取りました。

具体的な記述は省きますが、自分が良くやるのは

<div class="a">
<div class="b"></div> ←メイン
<div class="c"></div> ←サイド
</div>

としたとき、”a”に一番外の枠線を設定

”b”にサイドとの区切りのラインを設定します。

メインの内容が常にサイドより長くなるのが前提ですが。

或いは、幅固定なら”a”に縦のラインだけを背景画像として設定しちゃうというのもありますが・・・(^^;

id:workzaq1

ご回答頂きありがとうございます。


教えて頂いたこと試してみました。

すると、両端共に線が揃うのが見れて嬉しい限りです。


>メインの内容が常にサイドより長くなるのが前提ですが。

長くなる可変の部分にサイド設定するといいのですね。


>幅固定なら”a”に縦のラインだけを背景画像として設定

ありがとうございます、

そういう方法があるのですね^^;

2009/04/23 21:26:00
id:franz_liszt No.2

franz_liszt回答回数1ベストアンサー獲得回数02009/04/22 20:48:00

ポイント20pt

ブロックレベル要素の高さがそろってないのが原因なので

下記JSファイルを使って揃えてみてはいかがでしょうか?

「hightline.js」TO-R

http://blog.webcreativepark.net/2007/07/26-010338.html

id:workzaq1

ご回答頂きありがとうございます。


こちらの方、すみませんがまだ試せていません(汗)

試してみたいと思います。

2009/04/23 21:13:30
id:dmt13 No.3

dmt13回答回数4ベストアンサー獲得回数02009/04/23 00:45:08

ポイント20pt

縦の枠線が入った画像を、DIV③とDIV④の親要素の背景画像としてCSSに設定してみてはいかがでしょうか。

上記の方法でしたら、左右の高さがいかなる場合でも、見た目としては枠線がしっかり入った状態になります。

id:workzaq1

ご回答頂きありがとうございます。

すみません。

実はまだ、いまいち分かっていないので申し訳ないのですが・・・(汗)



|    | こういう背景画像を、

|    | Div③とDiv④の親要素であるDiv?に対してCSSを設定するということでしょうか?

|    |

|    |

2009/04/23 21:17:23
id:juner No.4

juner回答回数21ベストアンサー獲得回数02009/04/23 06:51:30

ポイント23pt
<div id="main">
 <div id="main_left">
 </div>
 <div id="main_right">
 </div>
</div>

の様な感じとした場合、

main_leftとmain_rightのブロックの高さが違う際に縦線を切れないように入れる方法は…。どちらかが高い事を保証しているならば可能です。

保証していないのならば画像をmainの背景に使って真ん中の線を入れてください。

尚、周りの線はmainに関連づけてやってやれば可能です。

id:workzaq1

ご回答頂きありがとうございます。


つまり、メイン部と、サイド部を

Divメインで囲ってしまうということですね。


この方法は#1さんも教えてくださっていたのですが

試してみたところ、線を綺麗に付けることができました。


「画像をmainの背景に使って真ん中の線を入れる」ということですが

 ← ここに画像を持たせるということですよね・・・



| 左のこのような

| 幅が殆どない、線だけの画像を、mainの真ん中に設定するようにするということでしょうか?


試してみようと思います。

2009/04/23 21:26:16
id:juner No.5

juner回答回数21ベストアンサー獲得回数02009/04/26 09:38:58

ポイント20pt

>左のこのような

>幅が殆どない、線だけの画像を、mainの真ん中に設定するようにするということでしょうか?

いいえ、main_leftとmain_rightの幅が決まっているので、main_leftとmain_rightの幅を足したサイズの横に長い画像を準備してそれを下に繰り返し表示させることで縦線を表現するということです。

元々背景なので真ん中とかそういう概念が無かった気がします。方法としてシンプルなものだとするならば高さ1pxで幅はmainの幅の画像を準備します。中央線が必要なところに点を打って、それを下に繰り返しさせるとあたかも真ん中に線が引かれている様にすることが出来ます。

この様な感じで宜しいでしょうか?(判りにくかったらすみません。

id:workzaq1

ご回答頂きありがとうございます。

ありがとうございます、わかったと想います。


「Width 幅画像の端→.」

繰り返し

「Width 幅画像の端→.」


こういう感じのが繰り返されて(リピート属性を付けて)つなげていくのですね。

確かにこの方法だと中央線を付けたい位置があれば、後はそこに点をおくだけでよくなるという訳ですね。


すみません、どうもありがとうございます。

2009/04/26 23:46:38

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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