Question

我非常精通CSS和HTML，但我可以理解它是如何正常工作的。

我希望容器的宽度为990像素，但由于左右增加了阴影，我的宽度约为1237像素

我已将它定位但我想要将溢出隐藏到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

提前感谢。

Answer 1

如果我找到了你，当屏幕小于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;
}

<强>样本

Try before buy

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

1 个答案: