- 締切済み
CSSレイアウトでこのようなことはできる？
ホームページをテーブルを使用しないCSSレイアウトで作成しようと思います。 左右を分けるのにfloatを使用して作っています。 横幅は30%と70%で分けていますが、ブラウザの幅を小さくすると上下にずれてしまいます。 そこでブラウザで800px以下になった時は横バー表示するようにしたいです。 このようなことはできるでしょうか？
- 123isao
- お礼率39% (123/310)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- bavarois
- ベストアンサー率34% (34/100)
回答No.2
さっきのでは横バー表示ができてませんでしたね（*o*）。 .a{ width:100%; ←ここを800px;にすれば800px以下になった時に横バーが出ると思います。 }
- bavarois
- ベストアンサー率34% (34/100)
回答No.1
<html> <head> <style type="text/css"> <!-- .a{ width:100%; height:100%; float:left; background-color:#c8ffdb; } .b{ width:30%; height:100%; float:left; background-color:#f15b7b; } .c{ width:70%; height:100%; float:left; background-color:#ffe7e7; } --> </style> </head> <body> <div class="a"> <div class="b">３０％</div> <div class="c">７０％</div> </div> </body> </html> これでできてると思います。 背景＆heightはご自由に・・・。
補足
すみません、質問の仕方が悪かったみたいです。 通常の表示は横１００％で表示し、横８００ピクセル以下の時のみ横バー表示する方法を知りたいです。 width:100%では常に１００％になりますし、width:800pxでは常に８００ピクセルになってしまいます。