首页 文章

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

提问于
浏览 次
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中居中间div并给左右div一个固定宽度（300px） - >当浏览器较小时，左div将移出浏览器（就像你可以重新缩放浏览器一样）对于网站的右侧 . 现在红色div的左侧始终位于浏览器的左侧 .

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

css html

2 回答

  • 0

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

    position: absolute;
right: ***px;

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

    您的问题可能是solution .

    回复于
  • 0

    你可以做一个media query删除div . 就像是

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

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

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

    回复于

相关问题