みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSでテーブル状にレイアウトしたが,背景色の範囲が意図と異なる.

cssを使って3列のテーブル状のレイアウトを作成しています.
外部cssファイルにてbackground-colorを記述して
背景色を3列それぞれにつけているのですが,行数の
違いによって背景色の付く範囲がそれぞれの列で
変わってしまっています.
(下のソースでいうと,111...は3行分の背景色が付きますが,
他の222...と333...は1行分の背景色しかつきませんが,
222...と333...の部分も背景色は3行分つけたいのです.)

原因は文字数の違いにより行数が異なるためと思いますが,
これを解決する方法はありますか?

【html記述】
<div id="table">

<div id="table_left">
111111<br>
111111<br>
111111<br>
</div>

<div id="table_center">
222222
</div>

<div id="table_right">
333333
</div>
<BR class="clears">
</div>

【css記述】
#table
{
width:700px;
margin:0px auto 0px;
border-style:solid;
border-color:#999;
border-width:1px;
}
#table_left
{
width:64px;
background-color:#e5ded7;
color:#80655e;
padding:8px;
float:left;
}
#table_center
{
width:294px;
padding:8px;
float:left;
}
#table_right
{
width:294px;
background-color:#edf8b1;
background-repeat:repeat;
padding:8px;
color:#3d6e14;
float:right;
}

投稿日時 - 2008-03-06 14:31:34

QNo.3838073

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

ずいぶん不親切な回答だったので自己補足します。

No1さんが出しておられる親要素にFloat指定するテクニックは
margin:0 auto;ではfloat指定をすると中央表示にならないので使えません。
そういう場合、ClearFixと呼ばれるCSSハックを使うと、FloatをかけなくてもFloatしたのと同じような状態になります。
#table {display:inline-block;} はIE7用の指定です。

レガシーブラウザでは確認してないのですが、IE6、FireFox等普及しているメジャーなブラウザでは同じような表示になると思います。

投稿日時 - 2008-03-07 11:24:32

お礼

No.3,No.4とご回答いただきありがとうございます.

1px四方のGIFファイルを背景として設定する方法は
当方も考えたのですが,容量が重くなってしまうのではないかと
思ったので採用しませんでした.

ありがとうございました.

投稿日時 - 2008-03-08 00:58:10

ANo.3

▼これで出来ると思います(paddingとかは消してあります)
#table
{
width:700px;
margin:0px auto 0px;
border-style:solid;
border-color:#999;
border-width:1px;
height:auto;
background:url(back.gif) repeat-y right top;
}
/*clear fix */
#table:after {
content:".";
height:0px;
clear:both;
display: block;
visibility:hidden;
}
#table {display:inline-block;}
/* end */
#table_left
{
width:100px;
background-color:#e5ded7;
color:#80655e;
float:left;
}
#table_center
{
width:300px;
float:left;
background-color:#ffffff;
}
#table_right
{
width:300px;
color:#3d6e14;
float:right;
}
<div id="table">

<div id="table_left">
111111<br>
111111<br>
111111<br>
</div>

<div id="table_center">
222222
</div>

<div id="table_right">
333333
</div>
</div>

右のテーブルの背景色は、#tableに背景画像を設定してrepeat-yで縦方向にリピートさせてつけます。

投稿日時 - 2008-03-07 11:11:11

ANo.2

CSS中の
#table_left
#table_center
#table_right
のそれぞれに、
height:70px; 程度の高さ指定はどうですか?
きれいではないですが、簡単です。
でも、文字数や行数が変わっても、高さ指定を変更しなくてもいいのが理想ですよね。

投稿日時 - 2008-03-06 23:23:30

お礼

回答していただきありがとうございます.

おっしゃる通り,文字数や行数が変わる可能性のある部分に使用するため,高さ指定をしないのが理想的なのです.

投稿日時 - 2008-03-06 23:35:51

ANo.1

cssで解決するならこちらの方法が一応ベストかと思います。
http://css-happylife.com/log/css-template/000028.shtml

これ以外にもJavascriptを使う、padding,margin,overflowを指定して強制的に高さをそろえる方法などもありますが。

投稿日時 - 2008-03-06 14:46:05

お礼

お返事ありがとうぎざいます.

リンク先のページをよく読んで,試してみようと思います.
paddingやmarginを用いて強制的に高さを揃える事も
やってみましたが,文字数が変わる可能性があるために
あきらめておりました.

投稿日時 - 2008-03-06 23:38:49

あなたにオススメの質問