作者ccchiccchi (ccchi)
看板Web_Design
標題[問題] 如何設定display讓物件垂直並列
時間Tue Apr 23 23:50:16 2019
各位前輩好
本版首po請多指教
有問題想請教大家...
在視窗過小的狀況下
不管display如何設定都無法讓物件 不 互相重疊
如果設定float:left;
則是container的顯示又變得詭異。
目前物件有
div(contianer)
nav
section*2
想要的效果是 當視窗縮小
可以呈現
nav
section1
section2
的狀態(也就是 nav會把section1的內容擠到下一行)
遇到的問題是nav跟section1的內容老是重疊在一起
(可是section1 2很正常)
如果用圖表示是這樣
https://imgur.com/kYGmE9x
請問應該怎麼設定才對呢?
謝謝大家
--
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.35.165.45
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1556034621.A.D00.html
1F：推 kids8649: 設定float的位置是哪邊&有用clear清除浮動造成的影響嗎@ 04/24 00:04
2F：→ kids8649: @？ 04/24 00:04
3F：推 kids8649: 或是用flex解，可能比較快吧 04/24 00:06
我用媒體查詢
min-width:600px的時候讓nav float:left
然後目前display的部分都是設定在 max-width:599px的條件裡
並沒有clear
我以為如果是這樣的狀況應該不用特別做clear...?
我會再試試看的
然後flex正在研究中...
※ 編輯: ccchiccchi (218.35.165.45), 04/24/2019 00:11:38
4F：→ kids8649: 你可以透過開發者工具那邊看看nav在伸縮視窗時候的設定 04/24 00:20
5F：→ cqwt: 用 flex 去解 04/24 01:00
7F：→ iamaustin316: 這樣是否是你要的 04/24 01:19
9F：推 pandaz79418: 把float取消掉就可以了 會重疊就是他還浮在上層 04/24 01:33
10F：→ ccchiccchi: 嗯嗯嗯就是想做i大那樣的效果！p大也謝謝，晚點有電腦 04/24 07:27
11F：→ ccchiccchi: 我再試試看，不好意思手機版我只會用箭頭回～感謝大家 04/24 07:27
12F：→ ccchiccchi: ！ 04/24 07:27
13F：推 LipaCat5566: flex 04/24 07:36
14F：推 ben91lin: flex的話，一樣nav跟main，@media主軸row/column換一下 04/30 19:29
15F：→ ben91lin: 就好 04/30 19:29
16F：推 LannisterImp: flex最快 06/08 13:42
17F：推 Gurio: 最討厭用float 用inline-block flex 06/22 02:52