作者virgin7 ()
看板Web_Design
标题[问题] 如何把这个改成RWD?
时间Sat Dec 3 01:10:59 2016
大家晚安
对RWD一直有个疑问,请看这个范例:
https://jsfiddle.net/t79o7rqy/
一个简单的幻灯片效果,如果要改成RWD
例如把
#slideshow 固定宽高改成 width: 50%; height: auto;
问题来了:
1.
#slideshow高度设成auto或不设高度,会因为里头div设了绝对定位而变成高度为零
就看不到任何图片了!如果设一个固定高度,RWD的宽度变动时高度却固定
效果就不对(不懂意思可以拉动视窗试试)
2.要如何在幻灯片宽高自动变动下,底下的"内容内容内容"文字能贴着幻灯片区块
因为slide中的图片都用绝对定位
那底下的"内容内容"就会往上跑而不能贴着幻灯片下方了
以上,感谢前辈们指导,其实类似问题常出现,希望能知道怎麽做才好,感思~
范例出处:
https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
--
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 101.13.96.176
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1480698665.A.B5E.html
1F:推 iamnodoubt: 假如你只是要做淡出淡入的话,图片其中一个div不要设成 12/03 02:11
2F:→ iamnodoubt: 绝对定位,让母元素被撑开高度,假如一定用position 12/03 02:12
3F:→ iamnodoubt: absolute去写的话,母元素高度只能用js动态运算,多想想 12/03 02:14
5F:→ lovehoward: com/questions/1495407/maintain-the-aspect-ratio-of 12/03 10:40
6F:→ lovehoward: -a-div-with-css 12/03 10:40