我的网站在一个宽度为980px的div容器中居中对齐。对于可点击的横幅广告,我需要在左侧有一个div槽,在右边需要一个div槽,但是我不希望它们位于可滚动容器中。
为了更清楚地说明,如果屏幕分辨率降到980像素,我不想看到广告或滚动条-只是我的容器。如果下降幅度小于980像素,我希望看到中心容器的滚动条(就像我现在所做的那样)。
装订线仅适用于宽屏用户,不应包含在滚动条中。我不想使用媒体查询,因为如果屏幕分辨率几乎足够宽,我希望广告的一部分向两侧展示。
我被困在如何做到这一点。我是否绝对放置容器并相对于装订线放置位置?我需要使用溢出吗?
最佳答案
检查此小提琴:http://jsfiddle.net/ezy2J/1/
请注意,除非iframe足够宽,否则横幅不会在小提琴中显示,因此请确保在小提琴中调整html iframe的大小。
您可以在容器上使用position: relative
,然后在横幅上使用position: absolute
,以使其停留在容器之外。
我使用媒体查询来隐藏,显示和调整横幅广告的大小(拖动HTML的iframe宽度)。您可能会使用display: block
和display: none
而不是opacity: 0
和opacity: 1
来实现兼容性,但是出于这些目的,它看起来更好!