Re: [問題] 請問codepen範例中RWD的元素上下排列

看板Web_Design作者 (Irena)時間6年前 (2017/08/30 18:54), 編輯推噓1(101)
留言2則, 1人參與, 最新討論串2/2 (看更多)
※ 引述《articulation (...)》之銘言: : 大家好 : 就是我在RWD的 max-width: 768px 中 : 要怎麼樣讓 left-col和 right-col 不是像桌面版本一樣並排(兩者排成一列) : 而是希望讓兩者上下排列( left-col 在上,right-col在下 : 請參考 https://codepen.io/anon/pen/NvEEwM : 我是在後面的原始碼中加了 : @media only screen and (max-width: 768px){ : .left-col{ : width:100%; : } : .right-col{ : width:100%; : position: relative; : left:0%; : top:100%; : } : } : 可是沒有運作成我想要的樣子,反而是right-col 蓋在 left-col之上 : 不知大家有沒有什麼建議呢? : 謝謝大家~ 先附上我小作修改的 https://codepen.io/anon/pen/brQZQj? 首先點出你css撰寫使用了sass(scss)的nested寫法 但在codepen css setting沒有做相關設定 然後善用開發者模式去看你所撰寫的css有沒有被吃到 position我全拿掉了 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.116.227.102 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1504090483.A.AD5.html

08/31 19:02, , 1F
嗯嗯~謝謝你的回信,在codepen是可以的,只是在我寫的
08/31 19:02, 1F

08/31 19:03, , 2F
網頁上好像還是不行,我會再研究的 謝謝~
08/31 19:03, 2F
文章代碼(AID): #1PffbphL (Web_Design)
文章代碼(AID): #1PffbphL (Web_Design)