Question

我正在使用

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

为我的#Wrapper添加阴影。出于某种原因，它只会走到菜单的末尾。任何人都可以在此示例http ://www.kerrydean.ca/MATHESON/home5.html

中看到原因

谢谢！

Answer 1

根据您排列布局的方式，您需要调整样式#Wrapper的方式。

这要做到这一点：

#Wrapper {
    background-color: #FFFFFF;
    float: left;
    left: 50%;
    margin: 0 -400px;
    padding-bottom: 13px;
    position: relative;
    width: 799px;
}

Answer 2

问题是你在非浮动内容中有浮动内容。您需要clearfix。

或者，您可以浮动#Wrapper元素，但不能将带有边距的浮动元素居中。这是一个例子：

<style type='text/css'>
  #Wrapper {
    margin: 0 auto;
    width: 799px;
  }

  #Page {
    float: left
  }
</style>

[ snip... ]

<div id='Wrapper'>
  <div id='Page' class='shadow'>
    [ The rest of your content goes here. ]

您的页脚也会导致问题，因为您通过相对定位移动了它。摆脱它并给它一个10px的上边距，你应该全部设置。

Box Shadow不会包含整个包装器

2 个答案: