容器溢出左侧的div结构和CSS：隐藏

我非常精通CSS和HTML，但我只是可以围绕如何正确工作。容器溢出左侧的div结构和CSS：隐藏

我希望有990px用于容器的宽度，但我对1237px宽度因添加了阴影左右

Ive得到了它的位置，但我想溢流被隐藏，直到990px宽...

有没有办法让这种情况发生？这是我目前的代码。

CSS：

body, html {margin:0; padding:0;} 
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;} 
#main-wraper { } 
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;} 
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;} 
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;} 
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}

HTML：

<body> 
    <div id="shadows"> 
    <div id="main-left"> 
     <div id="main-right"> 
     <div id="main-wraper"> 
      <div id="main-wraper-liner"> 
      <div id="main-container"> 
       <div id="main-container-liner"> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

这里是链接提前

http://hithouse.businesscatalyst.com/index.html

感谢。

来源

2012-11-14 raffi keklikian

如果我找到了你的话，当屏幕小于990px时，你不希望显示阴影。我会做的是这样的：

不离身，因为它是
创建一个透明的PNG与1px的高度和990px +阴影（左和右）
使用这种更简单的宽度标记
你准备好去

HTML

<div class="content"> 
    <div class="shadow"></div> 
    <h1>Normal content goes here</h1> 
</div>

CSS

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

div.content { 
    position: relative; 
    width: 400px; 
    height: 100%; 
    margin: 0 auto; 
    border: 1px solid red; 
} 

div.shadow { 
    position: absolute; 
    top: 0; 
    left: -28px; 
    width: 456px; 
    height: 100%; 
    background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0; 
}

DEMO

Try before buy

来源

2012-11-14 22:11:25 insertusernamehere

容器溢出左侧的div结构和CSS：隐藏

回答

相关问题