[問題] 請問這個CSS排版哪裡錯了??

看板Web_Design作者時間4年前 (2020/03/08 01:19), 4年前編輯推噓3(3推 0噓 9→)
留言12則, 9人參與, 4年前最新討論串1/1
想請問各位~ 目前我的CSS排版預覽如下圖 https://i.imgur.com/jIGg5ws.png
其中A、B、C、D、F區塊皆沒問題 (有試過把E區塊的內容及CSS拿掉，A、B、C、D、F區塊皆沒變動位置) 但唯獨E區塊都沒辦法排在D和F區塊的中間 有試過調D、E、F間的大小、距離等等，但還是一樣 E區塊硬是跑到B區塊的上面，而E區塊的內容又在D區塊的下面 請問，這E區塊是少了什麼設定嗎? 該如何設定正確呢?? 附上B~F的CSS碼 https://i.imgur.com/7jwWgHr.png
感謝。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.243.6.25 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1583601578.A.8A6.html
推
03/08 01:25, 4年前 , 1F
E區塊怎沒float
03/08 01:25, 1F
請問E區塊也需要float嗎? 不是D、F區塊分別float左、右後，E區塊就會在中間嗎?
→
03/08 11:43, 4年前 , 2F
請善用線上工具 https://jsfiddle.net
03/08 11:43, 2F
→
03/09 00:06, 4年前 , 3F
大概是因為bc也是float吧 ... 實務上應該是不會這樣寫
03/09 00:06, 3F
請問，那我該怎麼改才能把版面弄好呢?
→
03/09 00:53, 4年前 , 4F
bcdf float移出了normal flow，故normal flow從E繼續?
03/09 00:53, 4F
→
03/09 01:47, 4年前 , 5F
clearfix
03/09 01:47, 5F
→
03/09 10:51, 4年前 , 6F
用flex？
03/09 10:51, 6F
→
03/10 12:58, 4年前 , 7F
都2020了 建議用flex排版
03/10 12:58, 7F
推
03/11 00:01, 4年前 , 8F
全加 float 或 全不要
03/11 00:01, 8F
→
03/11 00:42, 4年前 , 9F
把同一row的元素包起來 裡面float inline-block flex隨
03/11 00:42, 9F
→
03/11 00:42, 4年前 , 10F
便
03/11 00:42, 10F
→
03/11 00:43, 4年前 , 11F
可以去觀察模仿市面上各大網站怎麼排的
03/11 00:43, 11F
了解，原來還有其他更好用的語法 感謝說明，我會去試試!! ※ 編輯: MAXQb (111.243.7.137 臺灣), 03/11/2020 23:27:12
推
04/03 02:41, 4年前 , 12F
下面兩個再包起來 就可以了啊
04/03 02:41, 12F
‣ 更多 MAXQb 的文章
文章代碼(AID): #1UOzUgYc (Web_Design)