Question

我为自己的网站制作了草图，请参阅jsFiddle。

HTML：

<div id="BG-scroll">
    <div id="faders">
        <div id="links"></div>
        <div id="filler"></div>
        <div id="rechts"></div>
    </div>
    <div id="wrapper"></div>
</div>

和CSS：

#BG-scroll {
    width: 100%;
    height: 503px;
    background-position: center;
    background-image: url(images/BG-container-1.jpg);
    background-repeat: no-repeat;
}   

#wrapper {
    width: 650px;
    height: 350px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    background-color: green;
}   

#faders {
    height: 200px;
    width: 950px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

#left {
    width: 150px;
    height: 200px;
    position: relative;
    float:left;
    background-color: red;
}

#filler {
    width: 650px;
    height: 200px;
    position: relative;
    float:left;
    background-color: blue;
}

#right {
    width: 150px;
    height: 200px;
    position: relative;
    float:left;
    background-color: pink;
}

我想要的是蓝色和绿色div以浏览器为中心。在红色和粉红色的左右div中将有2个图像幻灯片（在后台）在包装器中是主站点。

CSS中是否可以将2个中间div居中，并为左右div提供固定宽度（300px） - ＆gt;当浏览器较小时，左侧div将移出浏览器（就像您可以通过重新缩放网站右侧的浏览器一样。现在红色div的左侧始终位于浏览器的左侧。

这在CSS中是否可行？幻灯片放映的Joomla模块左右生成div以放置幻灯片。

Answer 1

您可以执行media query删除div。像

这样的东西

@media screen and (max-width: 300px){
    #div{
         display:none;
    }
}

一旦浏览器达到300px宽，则div会将样式更改为您在媒体查询下设置的任何内容。

我不太确定你问的其余问题是什么。

Answer 2

同意cimmanon，代码中没有红色和粉红色的div。但是，通常如果您希望在减小浏览器宽度时将某些元素“移出浏览器”，则可以使用此CSS样式：

position: absolute;
right: ***px;

您可能需要自己计算实际的正确位置，因为html元素的流程通常从左上角到右下角。使流动逆转（从右到左）并不容易，可能不推荐。

以下是您问题的可能solution。

让一个左边的div在浏览器边界消失（就像你已经可以在右侧）

2 个答案: