Question

在调整浏览器窗口大小时，是否有可能从左侧隐藏DIV？

由于正确显示广告，我尝试这样做，例如jsfiddle.net/h3b8g。

HTML：

<div id="wrapper">
    <div id="left"><img src="http://s11.postimg.org/a1hfwxgs3/left_428x600.jpg" /></div>
    <div id="right"><img src="http://s1.postimg.org/tn5copctb/right_428x600.jpg" /></div>
    <div id="center">
    <div id="top"><object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dKvOYd" width="1000px" height="100px"></object></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur veritatis fugit aspernatur quo repellendus corrupti perferendis inventore dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.</p>
    </div>
</div>

CSS：

#wrapper {
    position: relative;
}

#left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    padding-right: 500px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
}

#right {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    padding-left: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#center {
    position: relative;
    display: block;
    margin: -8px auto 0px auto;
    width: 1000px;
    background: black;
    height: 2500px;
}

#top {
    background: blue;
    width: 100%;
    height: 100px;
}

或者还有其他布局解决方案吗？

Answer 1

这对你有什么用？ My Fiddle

这是做了什么。你需要拥抱float元素，但它是响应式的。还有其他方法，但这会给你一些流动性和努力。

这是CSS：

#outterwrapper {
    width:100%;
    float:left;
    overflow:hidden;

}
#wrapper {
    width:80%;
    float:left;
}
#right, #left {
    position:relative;
    width:20%;
}
#left {
    float:left;
}
#left img {
    width:auto;
    position:absolute;
    top:0px;
    right:0px;
    border-right:#000 5px solid;
}
#right img {
    position:absolute;
    top:0px;
    left:0px;
    border-left:#000 5px solid;
}
#right {
    float:right;
}
#center {
    width:80%;
    min-height:800px;
    float:right;
    background: black;
}
#center p {
    text-align : center;
    color:#fff;
}
#top {
    width:100%;
    float:left;
}
#top object {
    width: 100%;
    height: 100px;
}

这是HTML

div id="outterwrapper">
    <div id="wrapper">
        <div id="left">
            <img src="http://s11.postimg.org/a1hfwxgs3/left_428x600.jpg" />
        </div>
        <div id="center">
            <div id="top">
                <object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dKvOYd"></object>
            </div>
            <p>In this place you need to have enought content or set a min-height.</p>
        </div>
    </div>
    <div id="right">
        <img src="http://s1.postimg.org/tn5copctb/right_428x600.jpg" />
    </div>
</div>

Answer 2

使用显示：无在你要隐形的div的css中。你不得不在每个媒体查询中使用display：none，你不希望这个div可见。

希望这有帮助。

Answer 3

好的，最后我找到了两个解决方案。我认为解决方案2更好，因为更好的浏览器兼容性。

解决方案1：CSS 3

CSS

#wrapper {
    position: relative;
}

#left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    padding-right: 500px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    background-image: url('http://s11.postimg.org/a1hfwxgs3/left_428x600.jpg');
    background-repeat: no-repeat;
    background-position: right 500px top;
    height: 600px;
}

#right {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    padding-left: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url('http://s1.postimg.org/tn5copctb/right_428x600.jpg');
    background-repeat: no-repeat;
    background-position: 500px;
    height: 600px;
}

#center {
    position: relative;
    display: block;
    margin: -8px auto 0px auto;
    width: 1000px;
    background: black;
    height: 2500px;
}

#top {
    width: 100%;
    height: 100px;
}

HTML

<div id="wrapper">
    <div id="left"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="right"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="center">
        <div id="top"><object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dKvOYd" width="1000px" height="100px"></object></div>
    </div>
</div>

解决方案2：空图像

CSS

#wrapper {
    position: relative;
}

#left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    padding-right: 500px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    background-image: url('http://s28.postimg.org/mwcqxhk4t/left.png');
    background-repeat: no-repeat;
    background-position: right;
    height: 600px;
}

#right {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    padding-left: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url('http://s13.postimg.org/rfq1vrwx3/right.png');
    background-repeat: no-repeat;
    height: 600px;
}

#center {
    position: relative;
    display: block;
    margin: -8px auto 0px auto;
    width: 1000px;
    background: black;
    height: 2500px;
}

#top {
    width: 100%;
    height: 100px;
}

HTML

<div id="wrapper">
    <div id="left"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="right"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="center">
        <div id="top"><object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dKvOYd" width="1000px" height="100px"></object></div>
    </div>
</div>

在调整浏览器窗口大小时隐藏左侧大小的DIV

3 个答案:

解决方案1：CSS 3

解决方案2：空图像