CSS div gutters not inc。在滚动/容器中

时间:2014-01-23 12:40:34

标签: html css layout position overflow

我的网站在div容器@ 980px宽度中居中对齐。我需要左边的div沟槽和右边的可点击横幅广告,但我不希望它们在可滚动的容器中。

为了更清楚地说明,如果屏幕分辨率降至980px,我不希望看到广告或滚动条 - 只是我的容器。如果它低于980px,我想看到中心容器的滚动条(就像我现在一样)。

装订线仅适用于更广泛的屏幕用户,不应包含在滚动条中。我不想使用媒体查询,因为如果屏幕分辨率几乎足够宽,我希望部分广告显示任何一方。

我被困住了怎么做。我是否将容器和相对于排水沟的位置绝对定位?我需要使用溢出吗?

2 个答案:

答案 0 :(得分:3)

检查这个小提琴:http://jsfiddle.net/ezy2J/1/

请注意,除非iframe足够宽,否则横幅不会显示在小提琴中,因此请务必调整小提琴中的html iframe。

您可以在容器上使用position: relative,然后在横幅上使用position: absolute,让它们留在容器外。

我使用媒体查询隐藏,显示和调整横幅大小(拖动HTML的iframe宽度)。您可能会使用display: blockdisplay: none来代替opacity: 0opacity: 1,但它看起来更好用于这些目的!

答案 1 :(得分:0)

类似 that

了解position: absolute 不要忘记父容器上的position: relative