PTT數位生活區 / Web_Design

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

看板Web_Design作者 (ccchi)時間5年前 (2019/04/23 23:50), 5年前編輯推噓9(9推 0噓 8→)
留言17則, 9人參與, 5年前最新討論串1/1
各位前輩好 本版首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://www.ptt.cc/bbs/Web_Design/M.1556034621.A.D00.html
推
04/24 00:04, 5年前 , 1F
設定float的位置是哪邊&有用clear清除浮動造成的影響嗎@
04/24 00:04, 1F
→
04/24 00:04, 5年前 , 2F
@？
04/24 00:04, 2F
推
04/24 00:06, 5年前 , 3F
或是用flex解，可能比較快吧
04/24 00:06, 3F
我用媒體查詢 min-width:600px的時候讓nav float:left 然後目前display的部分都是設定在 max-width:599px的條件裡 並沒有clear 我以為如果是這樣的狀況應該不用特別做clear...? 我會再試試看的 然後flex正在研究中... ※ 編輯: ccchiccchi (218.35.165.45), 04/24/2019 00:11:38
→
04/24 00:20, 5年前 , 4F
你可以透過開發者工具那邊看看nav在伸縮視窗時候的設定
04/24 00:20, 4F
→
04/24 01:00, 5年前 , 5F
用 flex 去解
04/24 01:00, 5F
推
04/24 01:19, 5年前 , 6F
04/24 01:19, 6F
→
04/24 01:19, 5年前 , 7F
這樣是否是你要的
04/24 01:19, 7F
推
04/24 01:30, 5年前 , 8F
04/24 01:30, 8F
推
04/24 01:33, 5年前 , 9F
把float取消掉就可以了 會重疊就是他還浮在上層
04/24 01:33, 9F
→
04/24 07:27, 5年前 , 10F
嗯嗯嗯就是想做i大那樣的效果！p大也謝謝，晚點有電腦
04/24 07:27, 10F
→
04/24 07:27, 5年前 , 11F
我再試試看，不好意思手機版我只會用箭頭回～感謝大家
04/24 07:27, 11F
→
04/24 07:27, 5年前 , 12F
！
04/24 07:27, 12F
推
04/24 07:36, 5年前 , 13F
flex
04/24 07:36, 13F
推
04/30 19:29, 5年前 , 14F
flex的話，一樣nav跟main，@media主軸row/column換一下
04/30 19:29, 14F
→
04/30 19:29, 5年前 , 15F
就好
04/30 19:29, 15F
推
06/08 13:42, 5年前 , 16F
flex最快
06/08 13:42, 16F
推
06/22 02:52, 5年前 , 17F
最討厭用float 用inline-block flex
06/22 02:52, 17F
‣ 更多 ccchiccchi 的文章
文章代碼(AID): #1SlpGzq0 (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 ccchiccchi 的文章
文章代碼(AID): #1SlpGzq0 (Web_Design)