(所期の目的以外の前提条件は変更しないでお願いします)
CSS で親ボックス (浮動、もしくは非浮動いずれでも) の「幅」を 100 % にします。
3 つの娘ボックスを作成します。1 つ目を「左」、2 つ目を「左」、そして最後のを「右」(もしくは左) のそれぞれ「浮動」とし、1 つ目と 2 つ目の「幅」をそれぞれ 20 画素とします。
質問です:
2 つ目の娘ボックスの幅を、親ボックスの幅からピッタリ 40 画素だけ控除したものにしたいです。
つまり、3 つの娘ボックスの幅の合計が、80 画素以上の任意幅のウィンドウ内枠にピッタリ収まるようにしたいのです。
2 つ目の娘ボックスの幅を「自動」とすることで、メジャー シェアの MSIE 6.0 と 7.0 では達成できましたが、むしろ「正しい」動きであるほうの Firefox と Opera では、3 つの娘ボックスの幅の合計は 2 つ目の娘ボックス内のコンテンツ如何になってしまいます。また、2 つ目の娘ボックスの幅を「100 %」とすると、これ単独で画面幅いっぱいとなってしまいます。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
具体的な数値で書いてもらえると解りやすいです。
ようするに、親要素のwidthが100%、子要素のwidthがそれぞれ左20px、中央自動、右20pxという3カラムの状態になる、ということでしょうか??
親要素のwidthにpxでなく%を指定している限り、それに含まれる子要素のうち、widthに%指定、またはauto指定しているものの幅はウィンドウによって変動します。
もしCSSの知識があまりないようであれば、それらの要素をテーブルで囲み、作成することをお勧めします。
CSSはブラウザによって解釈が違いますし、他にどんな指定をされているのかども影響してくるため、ソースの提示なくしてなかなかアドバイスできるものではないと思います。
ブラウザごとのズレはCSS ハックを使うことでそこそこのブラウザに対応させることができますよ。
No.1
- 回答日時:
具体的に css、html のソースを示した方が具体的なアドバイスを頂けると思います。
正直は話、margin や padding の影響が有ると思いすので。この回答への補足
ご提案について、すごく奇異に思いました。
すなわち、「正しく書いたはずなのにおかしな挙動となる」という場合は、質問者のソース提示により、(たとえば、「どこそこの記述がおかしい」などと) 指摘することで解決につながると思うのですが、本件では私が Firefox や Opera で所期の表示が得られる正しい記述を知らないわけであり、それらの現在の挙動はむしろ正常であることを考えると、上記と同様には考えられないのではないでしょうか。
むしろ、Firefox や Opera で所期の表示が得られるような記述を「私が」いただきたいと思っているのですが、いかがでしょうか。
言葉足らずで誤解となるといけないので、こちらで補足させていただきます:
端的にいえば、「私の所期の表示が Firefox や Opera で達成できる記述法が『あるのであれば』、教えていただきたい」ということなのです。
IE が*誤って*表示するところの私の現記述を云々は理屈上無関係だと思うのですが、いかがでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- Excel(エクセル) ログインIDの一発入力? 5 2023/07/07 12:30
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- HTML・CSS HTMLのテーブル 2 2022/09/25 01:01
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- Excel(エクセル) エクセル シート内のボックスを縦並びから横並びに 7 2023/04/05 04:28
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- 九州・沖縄 母娘で初九州旅行ですが 6 2023/02/13 23:06
- メイク 二重についてです。 左目は綺麗に末広(頑張れば平行)にもなるような瞼なのですが、右目が写真のようにア 2 2022/08/01 11:15
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
スマホ(android)のタッチパネ...
-
css初心者 フレックスボックス...
-
メモ帳の段落の揃え方
-
CSS、Bootstrapについて contai...
-
テーブルの行を折りたたみたい...
-
WEBページを強制的に横画面で見...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
列のどこをクリックしてもソー...
-
ボタンが押されたらWebページの...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
iPhoneで HTMLファイルを閲覧
-
角丸画像の背景色を透明にした...
-
htmlソース文の 各行 改行位置...
-
ホームページのURLをコピー...
-
pythonのコードについてご教示...
-
すいません HTMLです この画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
htmlで<form>~</form>を並べて...
-
WEBページを強制的に横画面で見...
-
コードを書いて下さい( ; ; )...
-
css初心者 フレックスボックス...
-
テーブルのセルデータを自動改...
-
CSSデータの作成方法について(...
-
HTMLで画像をポップアップで表...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
HTMLで特定の文字だけ色を変え...
-
プログラミングの勉強が進みません
-
スマホでHTMLファイルを開いて...
-
テーブルタグのセルの幅の一部...
-
CSSでつくったメニューのアニメ...
-
大至急。webのシングルページを...
-
角丸画像の背景色を透明にした...
-
HTML入門でもう躓いてしまった。
-
HTMLの CSSのファイルというの...
おすすめ情報