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

解決済みの質問

cssのfloatについて質問です。

cssでfloatを使い3カラムで表示しています。
クラスは左からleft,centre,rightと振っています。
やりたいことはウィンドウサイズを縮めた時にカラム落ちするのではなく、
rightのdivをlefr,centreの下に潜り込ませたいです。
イメージ的にはleft,centreのz-indexが1に対し、rightが0で下に入るように縮めたいです。
できればpositionは使いたくないです。
flexboxでも試してみましたが、比率が変わりいい感じに縮むのですが、下に潜り込ませることはできませんでした。
もしなにかアドバイスがあれば宜しくお願い致します。

投稿日時 - 2018-04-27 12:04:29

QNo.9492750

すぐに回答ほしいです

質問者が選んだベストアンサー

やはり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を調整することで、擬似的にそのように見せかけているだけです。

投稿日時 - 2018-04-28 11:39:41

補足

なるほど。こういうような手があったのですね。
思いつかなかったです。勉強になりました。
少し試してみてもしまた何か質問があればよろしくお願いします。

投稿日時 - 2018-04-28 17:10:02

ANo.1

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

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

回答(2)

ANo.2

display: flex;
flex: 0 0 1; とかflexを当ててみるのはどうでしょうか

投稿日時 - 2018-05-05 07:32:31

あなたにオススメの質問