- ベストアンサー
cssのfloatについて質問です。
cssでfloatを使い3カラムで表示しています。 クラスは左からleft,centre,rightと振っています。 やりたいことはウィンドウサイズを縮めた時にカラム落ちするのではなく、 rightのdivをlefr,centreの下に潜り込ませたいです。 イメージ的にはleft,centreのz-indexが1に対し、rightが0で下に入るように縮めたいです。 できればpositionは使いたくないです。 flexboxでも試してみましたが、比率が変わりいい感じに縮むのですが、下に潜り込ませることはできませんでした。 もしなにかアドバイスがあれば宜しくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
やはりpositionを使うべき場面だと思いますが、何らかの理由で使えないのであれば、 こんな感じでしょうか。 ============== ソース （ここから）==================== <!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> html, body { margin:0; padding:0; } #wrap { width:100%; } #wrap div { height:200px; float:left; } #left, #center, #rightInner { width:300px; } #left { background-color:#f00; } #center { background-color:#090; } #right { width:calc(100% - 600px); background-color:#00f; overflow:hidden; } @media only screen and (max-width: 900px) { #rightInner { margin-left:calc(100% - 300px); } } </style> </head> <body> <div id="wrap"> <div id="left"></div> <div id="center"></div> <div id="right"><div id="rightInner">ああああああああああああああああああああああああああああああああああああああああああああああ</div></div> </div> </body> </html> ============== ソース （ここまで）==================== ※上記のソースをコピペして実際の動きを確認してください。 ウィンドウ幅が900px以下で、#right（背景色青）の領域内の「あああ・・・」の文字が#center（同緑）の領域の下に潜り込むような感じになります。 実際は潜り込んでいるのではなく、親要素のoverflow:hidden; と 子要素のmargin-leftを調整することで、擬似的にそのように見せかけているだけです。
その他の回答 (1)
- gahyu
- ベストアンサー率50% (3/6)
display: flex; flex: 0 0 1; とかflexを当ててみるのはどうでしょうか
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
なるほど。こういうような手があったのですね。 思いつかなかったです。勉強になりました。 少し試してみてもしまた何か質問があればよろしくお願いします。