0

我为我的网站做了一个草图，请在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）-> 当浏览器较小时，左侧 div 将移出浏览器（就像您可以重新缩放浏览器一样用于站点的右侧。现在红色 div 的左侧始终位于浏览器的左侧。

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

4

2 回答 2

0

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

position: absolute;
right: ***px;

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

这是您问题的可能解决方案。

于 2013-05-30T01:01:29.930 回答
0

你可以做一个媒体查询来删除 div。就像是

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

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

不过，我不太确定您对其余问题的要求是什么。

于 2013-05-30T00:45:08.737 回答