Re: [問題] div向下對齊的問題
唔...發完後看到原文底下 mrbigmouth 的推文
他提出的方法簡單多了,我竟然沒有想到 XDDD 真抱歉!
※ 引述《uoyihc (dormSeventh409)》之銘言:
: 實做後如以下網址:(原始碼附在最後)
: http://www.dinkypage.com/141521
: 但遇到了一些狀況 懇請板友指導一下 m(_ _)m
: 當滑鼠移到link1~7其中之一時
: 旁邊其他選項會隨著往上跑而沒有貼齊桃紅色方塊的下緣
: 請問該怎麼作能讓所有選項一直貼著桃紅色方塊的下緣呢
雖然 .nav-menubar 區塊本身是用 bottom 來設定座標沒錯,
但它內部的 .nav-menu 預設當然是靠頂端的,
而被 hover 的 .nav-menu 高度變高了,所以包住它的 .nav-menubar 也就跟著變高了
靠頂端的小區塊當然就一起往上跑了 XD ~
考慮到這種情形,原 po 可以在 .nav-menu:hover 中設一個負的 margin,
把變高的區塊本身往下挪,例如 margin-bottom: -20px;
這樣在 hover 的同時它不但會變高,也會往下挪,其他區塊就不會跑掉了。
但原 po 又希望被 hover 的區塊也靠底端,所以這時候還要加上
position: relative; bottom: 15px; 把它再往上推到原 po 想要的位置。
嗯...不過我自己測試時發覺,這種設定方式會造成各瀏覽器對 transition 動畫
移入移出時的移動方式解讀不同,如果要像原 po 說的一直置底的話,
只需在 .nav-menu 內再設定 position: relative; bottom: 0; 即可 =)
--
在靜謐的國度裡,擁抱微風-- 抱風伴靜 http://blog.hit1205.org
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.57.103.166
※ 編輯: hit1205 來自: 61.57.103.166 (02/14 17:43)
→
02/14 17:49, , 1F
02/14 17:49, 1F
推
02/14 17:58, , 2F
02/14 17:58, 2F
→
02/14 17:58, , 3F
02/14 17:58, 3F
→
02/14 17:58, , 4F
02/14 17:58, 4F
推
02/15 09:52, , 5F
02/15 09:52, 5F
討論串 (同標題文章)