0

我非常精通 CSS 和 HTML，但我只是想知道这将如何正常工作。

我希望容器的宽度为 990px​​，但由于左右添加了阴影，我的宽度约为 1237px

我把它定位了，但我希望将溢出隐藏到 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

提前致谢。

4

1 回答 1

0

如果我猜对了，当屏幕小于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;
}​

演示

先试后买

于 2012-11-14T22:11:25.827 回答