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

Divを使用したレイアウトがあるのですが、
崩れてしまうので悩んでいます。

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

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

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

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

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

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

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

1240324462
●拡大する

●質問者: workzaq1
●カテゴリ:インターネット ウェブ制作
✍キーワード:いもの メイン レイアウト 画像 記述
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● M_tatsuki
●25ポイント ベストアンサー

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

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

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

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

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

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

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

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

◎質問者からの返答

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


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

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


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

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


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

ありがとうございます、

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


2 ● franz_liszt
●20ポイント

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

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

「hightline.js」TO-R

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

◎質問者からの返答

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


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

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


3 ● dmt13
●20ポイント

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

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

◎質問者からの返答

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

すみません。

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



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

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

| |

| |


4 ● juner
●23ポイント
<div id="main">
 <div id="main_left">
 </div>
 <div id="main_right">
 </div>
</div>

の様な感じとした場合、

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

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

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

◎質問者からの返答

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


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

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


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

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


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

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



| 左のこのような

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


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


5 ● juner
●20ポイント

>左のこのような

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

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

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

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

◎質問者からの返答

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

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


「Width 幅画像の端→.」

繰り返し

「Width 幅画像の端→.」


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

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


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

関連質問


●質問をもっと探す●



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