在 webkit 浏览器中,此页面呈现良好:
http://www.ryanhaywood.com/s/film.html
但是在更新的 Firefox 中,它的间距非常大。我在萤火虫中搞砸了好几天,我什至不知道如何在 Firefox 中解决这个问题。
对于上述页面中部署的过时解决方案(表格),我深表歉意
谁能发现问题?
在此先感谢瑞恩
在 webkit 浏览器中,此页面呈现良好:
http://www.ryanhaywood.com/s/film.html
但是在更新的 Firefox 中,它的间距非常大。我在萤火虫中搞砸了好几天,我什至不知道如何在 Firefox 中解决这个问题。
对于上述页面中部署的过时解决方案(表格),我深表歉意
谁能发现问题?
在此先感谢瑞恩
您曾表示使用表格创建布局已过时,我绝对同意。这是一个使用<div>
's 的解决方案,它应该适用于所有浏览器
这里的例子:http: //jsfiddle.net/pxfunc/hjgQm/
我已经将电影分类为 divleft-orientation
的right-orientation
交替模式,如下所示:
<div class="left-orientation">
<a href="#"><img src="http://placehold.it/250x175/ff0" alt="Director's Reel" /></a>
<p class="title">Director's Reel</p>
</div>
<div class="right-orientation">
<a href="#"><img src="http://placehold.it/250x175/f00" alt="Nobody's Off The Hook" /></a>
<p class="title">Nobody's Off The Hook</p>
</div>
我使用边距来控制影片在父 div 中的显示位置
#films div {width:46%;margin-top:-100px;}
#films .left-orientation {text-align:right;}
#films .right-orientation {margin-left:54%}
您可以#films div {margin-top:-100px;}
向上或向下调整以适合您所需的高度以抵消电影