Question

我是新手表布局，最近设计的网站布局。现在将表格布局转换为表格较少的布局。我正在使用网站的背景图像。我在包装div中遇到问题，我给包装div一个背景颜色和一个阴影，但它没有应用。指导我出错的地方

HTML：

<body>
<div id="wrapper">

</div>
</body>

CSS：

body
{
background-image:url(../images/site-bg-5.jpg);
}

#wrapper {
width: 950px;
height:1500px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 0 10px #000;
border: 1px solid #000;
}

我遇到问题，包装div有阴影和边框，但它具有特定的高度。我想要影子＆amp;边框高度自动调整包装div的高度。用正确的方法展示一个工作小提琴。

Answer 1

＆＃34;＃＆＃34;之间有一个空格。和＃34;包装＆＃34;。删除它，它应该工作。

这应该是最终的css：

body{
  background-image:url(../images/site-bg-5.jpg);
}

#wrapper {
  width:950px;
  margin:0 auto;
  background-color:#FFF;
  box-shadow: 0 0 10px #000;
  border:1px solid #000;
}

Answer 2

#wrapper是正确的

body {
  background-image: url(../images/site-bg-5.jpg);
}
#wrapper {
  width: 950px;
  margin: 0 auto;
  background-color: #FFF;
  box-shadow: 0 0 10px #000;
  border: 1px solid #000;
}

<body>
  <div id="wrapper">
df
  </div>
</body>

Answer 3

试试这个css

body{background-image:url(../images/site-bg-5.jpg); }
#wrapper{width:950px;margin:0 auto;background-color:#FFF;box-shadow: 0 0 10px #000;border:1px solid 000;}

Answer 4

删除＃和包装器之间的空间，它将起作用

还添加height

这是工作小提琴：Demo

Answer 5

在此处查看演示：See Demo

#wrapper {
width:950px;
margin:0 auto;
background-color:#FFF;
box-shadow: 0 0 10px #000;
border:1px solid #000;
}

包装div的css

5 个答案: