当我制作我的 HTNL 页面时,它看起来很完美,但突然之间,我的页面底部出现了巨大的空白。你可以在http://thomaswd.com/pearinc2看到它。我该如何摆脱这个?!我的样式表位于http://thomaswd.com/pearinc2/style.css
3 回答
如果您查看带有类的 HTML 元素,back-iphone4s
您会注意到它使用 CSS 相对定位。
如果您position: relative
从 CSS 规则中删除该部分,.back-iphone4s
您会注意到它出现在您的空白处。
像这样使用总是很糟糕,如果元素没有相对定位position: relative
,空白就会出现在元素的位置。
我建议将其添加position: relative
到 divdevices
作为其类,然后使用position: absolute;
on.back-iphone4s
并使用该方法设置它的位置。这样,back-iphone4s
元素相对于它的父元素定位,而不是相对于它在正常文档流中的位置。
还有很多其他方法可以解决这个问题,乍一看,我很想把这两部 iPhone 变成一张图片,更少的 HTML,更少的 CSS 和更少的图片下载,但看起来你可能已经有意他们为了一个目的而分开,所以也许这不是一个可行的解决方案。
... 唷,希望这是有道理的,如果现在让我知道。
给班级height
一个:.devices
.devices {height: 520px;}
我只是快速浏览了一下你的风格,我所看到的在技术上非常难看。您使用 position:absolute 设置所有主要元素,并使它们独立于上下文和内容流。而且因为它们是绝对的,所以你必须给它们一个高度——这会导致像丑陋的空白这样的事情。我会说你对页面的样式/结构有错误的概念。
尝试使用“位置:绝对”非常罕见!