Re: [問題] div向下對齊的問題

看板Web_Design作者 (幫你把勇氣裝滿)時間14年前 (2012/02/14 17:39), 編輯推噓2(203)
留言5則, 3人參與, 最新討論串2/2 (看更多)
唔...發完後看到原文底下 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
感謝回覆 你太客氣了XD你教的方法現在用不到也許以後會用上
02/14 17:49, 1F

02/14 17:58, , 2F
relative對bottom:0會有效果嗎?o_O
02/14 17:58, 2F

02/14 17:58, , 3F
應該是外面再包一圈relative的div 裡面設absolute跟
02/14 17:58, 3F

02/14 17:58, , 4F
bottom:0才對吧?
02/14 17:58, 4F

02/15 09:52, , 5F
挖寫得好棒!我也應該要來試試看向下對齊的方式!
02/15 09:52, 5F
文章代碼(AID): #1FEYlTYW (Web_Design)
文章代碼(AID): #1FEYlTYW (Web_Design)