- ベストアンサー
CSS ブロックの配置について
ヘッダの部分なんですが、左上にロゴ、その隣に少しスペースを空けて二つブロック要素を配置したいんですが、(テーブルで言うと2行3列と言った感じです)position: absoluteで指定すると絶対値で指定されてるので、ウィンドウ幅を変えたりしても、それに合わせてサイズが変わらないんですが、変わるようにはどう記述したらいいんでしょうか？position: absolute以外で記述すると思ったところに配置されません。どなたかアドバイスいただけませんか？宜しくお願い致します。
- takootie
- お礼率70% (24/34)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
以下のソースでいかがでしょう? <html lang="ja"> <head> <style type="text/css"> <!-- #container { width:99%;←100%だとバグるかもしれないので overflow:hidden; } #container:after { content"."; display:block; clear:both; height:0; line-height:0; visibility:hidden; } #container .logo { float:left; } #container .rightBlock { float:right; } --> </style> </head> <body> <div id="container"> <div class="logo"><p><img src="logo.gif" width="200" height="50" border="0" alt="ロゴ" title=""></p></div>←ロゴの画像 <div class="rightBlock"> <p><img src="gazou.jpg" width="150" height="80" border="0" alt="" title=""></p>←右の画像1 <p><img src="sub.jpg" width="150" height="80" border="0" alt="" title=""></p>←右の画像2 </div> </div> </body> </html>
その他の回答 (2)
- gryfinndors
- ベストアンサー率18% (127/671)
ＷＩＮＤＷＯＳサイズでブロック幅が変わることは無いでしょう。文字サイズを変えて変わることはありますが。 どうしてもやるならｊａｖａｓｃｒｉｐｔ等でブラウザの情報を引っ張ってＣＳＳを排出するしか有りません。 文字で変えるなら単にＦＬＯＡＴ：ＬＥＦＴで出来るのではないかな。
- kuronekoyarou
- ベストアンサー率54% (30/55)
＞隣に少しスペースを空けて二つブロック要素を配置 とありますが、メニューを配置したいっていうことでしょうか？ 具体的なイメージが浮かばないので何ともいえません。 参考にしているサイトなど「こういうのを作りたい」っていう概要を書いてください。
補足
申し訳ないですが、参考サイトがちょっとすぐに見つからないんですが、800px×50pxほどの横幅に左端にボックス1つ(ロゴ)、右端ボックスを縦に2つ(画像とボタン)配置したいとゆうことです。float：leftとfloat：rightでできるんでしょうか？leftはうまく反映されるんですが、rightが上のボックスにしか効かずうまくいきません。 分かりにくくて申し訳ないです。。。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
補足
回答ありがとうございます。 例えば、テーブルデザインで％のテーブルで枠を作った時に、ウィンドウの幅によってテーブルが可変すると思うんですが、それはブロックとゆうかテーブルなしではできないんでしょうか？