[問題] 如何設定display讓物件垂直並列

作者: ccchiccchi (ccchi)   2019-04-23 23:50:16
各位前輩好
本版首po請多指教
有問題想請教大家...
在視窗過小的狀況下
不管display如何設定都無法讓物件 不 互相重疊
如果設定float:left;
則是container的顯示又變得詭異。
目前物件有
div(contianer)
nav
section*2
想要的效果是 當視窗縮小
可以呈現
nav
section1
section2
的狀態(也就是 nav會把section1的內容擠到下一行)
遇到的問題是nav跟section1的內容老是重疊在一起
(可是section1 2很正常)
如果用圖表示是這樣
https://imgur.com/kYGmE9x
請問應該怎麼設定才對呢?
謝謝大家
作者: ben91lin (一條毫無反應的魯蛇)   2019-04-30 19:29:00
flex的話,一樣nav跟main,@media主軸row/column換一下就好
作者: kids8649 (D調不在*)   2019-04-24 00:04:00
設定float的位置是哪邊&有用clear清除浮動造成的影響嗎@@?或是用flex解,可能比較快吧你可以透過開發者工具那邊看看nav在伸縮視窗時候的設定
作者: cqwt (tony)   2019-04-24 01:00:00
用 flex 去解
作者: iamaustin316 (新店速哥)   2019-04-24 01:19:00
作者: pandaz79418 (批炸)   2019-04-24 01:30:00
https://codepen.io/PizaLin/pen/bJxJVL把float取消掉就可以了 會重疊就是他還浮在上層
作者: ccchiccchi (ccchi)   2019-04-24 07:27:00
嗯嗯嗯就是想做i大那樣的效果!p大也謝謝,晚點有電腦我再試試看,不好意思手機版我只會用箭頭回~感謝大家!
作者: LipaCat5566 (不斷與時間競賽)   2019-04-24 07:36:00
flex
作者: LannisterImp (Mr.Tmp)   2019-06-08 13:42:00
flex最快
作者: Gurio (Lala)   2019-06-22 02:52:00
最討厭用float 用inline-block flex

Links booklink

Contact Us: admin [ a t ] ucptt.com