Question

我在主#container div周围放了一个方框阴影，虽然#footer div位于#container div内，但#footer

周围没有阴影显示

你能帮帮我吗？谢谢。

HMTL代码：

<div id="container">

<div id="banner">
</div><!--end of banner-->

<div id="menubar">
<div id="nav">
<ul>
  <li><a href="#">HOME </a></li>
  <li><a href="#">FACILITATI</a></li>
  <li><a href="#">LOCATIE</a></li>
  <li><a href="#">GALERIE</a></li>
  <li><a href="#">TARIFE</a></li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#"><strong>OFERTE</strong></a>
  <ul>
    <li><a href="#">SEMINARII </a></li>
    <li><a href="#">REVELION 2015 </a></li>
    <li><a href="#">CRACIUN 2015 </a></li>
  </ul>      
  </li>
</ul><!--end menu ul-->
</div>
</div><!--end of menubar-->

<div id="content">
<div id="content_text">spozitie in orice perioada a anului noua    camere       duble si un apartamespozitie in orice perioada a anului noua camere duble si un apartamespozitie in orice perioada a anului noua camere duble si un apartamespozitie in orice perioada a anului noua camere duble si un apartame.</div> 
<div id="poze1"><div id="content_div1"><img src="images/apart.jpg" width="233" height="154" />spozitie in orice perioada a anului noua camere duble si un apartame</div>
<div id="content_div1"><img src="images/ski.jpg" width="233" height="154" />spozitie in orice perioada a anului noua camere duble si un apartame</div>
<div id="content_div1"><img src="images/conf.jpg" width="233" height="154" />spozitie in orice perioada a anului noua camere duble si un apartame</div></div>

</div><!--end of content-->



<div id="footer"><p>spozitie in orice per</p>
<img src="images/fbb.jpg" width="102" height="34" />

</div><!--end of footer-->
</div><!--end of container div -->

CSS代码：

<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #FFC;
font-family: "Roboto Slab";
background-image: url(images/fulg.jpg);
background-repeat: repeat;
}
#container {
padding: 0px;
height: auto;
margin-left: auto;
margin-right: auto;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 800px;
box-shadow: 3px 3px 2px #000;
}
#banner {
margin: 0px;
padding: 0px;
height: 328px;
width: 800px;
background-image: url(images/banner_original.jpg);
background-repeat: no-repeat;
}
#menubar {
margin: 0px;
width: 800px;
height: 30px;
text-align: center;
vertical-align: middle;
background-color: #663200;
border-top-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FC0;
border-bottom-color: #FC0;
border-bottom-width: 1px;
}

#nav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
position:relative;

}
#nav ul li {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 0px;
margin: 0px;
}
#nav ul li a:hover {
background-color: #FFCC00;
color: #663200;

}

#nav ul li a{
padding: 0px;
margin: 0px;
display: block;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
color: #FC0;
line-height: 30px;
}
#nav ul li:hover > ul {
display: block;


}
#nav ul li:hover {
background-color: #FFCC00;

}
#nav ul ul {
background-color: #FFCC00;
color: #663200;
padding: 0px;
position: absolute;
display: none;
right: 0;
top: 100%;
}
#nav ul ul li {
display: block;

}
#nav ul ul li a{
color: #663200;
}

#nav ul ul li a:hover{
background-color: #FFCC00;
}
#nav ul li:hover a{
color: #663200;

}
#nav ul ul li:hover a{
background-color: #DFB300;
}

#content {
padding: 0px;
height: auto;
width: 800px;
background-color: #663200;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-size: 15px;
font-family: "Roboto Slab";
}
#content_text {
padding: 15px;
color: #FC0;
text-align: center;
}
#content_div1 {
width: 227px;
font-family: "Roboto Slab";
color: #FC0;
text-align: center;
display: inline-block;
vertical-align: top;
padding-right: 18px;
padding-bottom: 10px;
}
#poze1 {
text-align: center;
padding-left:9px;
}
#content_div1 img {padding-bottom:15px;}
#footer {
padding: 0px;
margin: 0px;
background-color: #663200;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FC0;
font-family: "Roboto Slab";
color: #FC0;
font-size: 14px;
vertical-align: middle;
height: 50px;
width: 800px;
float: left;
}
#footer img {float:right; padding-top:7px; padding-right:100px}
#footer p { padding-left:330px; float:left;}
</style>

Answer 1

尝试从页脚 div css中删除 float：left; 。我会帮你的。我试过了。

Answer 2

我看不到你的影子，但是试着从#footer中删除float：left，所以页脚继续在容器中出现

Answer 3

您可以添加：

<br style = "clear:both">

在页脚的结束标记之后 - 并显示您的投影。

FIDDLE

Answer 4

删除#footer

中的float left

http://jsfiddle.net/senthil2rajan/sympbqx9/

Answer 5

float: left;会导致问题。要么删除它，要么设置为none / initial。

Answer 6

从页脚c jsFiddle

中删除float：left

#footer {
padding: 0px;
margin: 0px;
background-color: #663200;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FC0;
font-family: "Roboto Slab";
color: #FC0;
font-size: 14px;
vertical-align: middle;
height: 50px;
width: 800px;   
}

Answer 7

在html中关闭页脚标记后添加<div class="clear"></div>。

将.clear {clear: both;}添加到您的css文档中。

Answer 8

试试这个..这可能会对你有帮助，

在#container

中更改box-shadow样式

http://jsfiddle.net/sympbqx9/2/

容器div盒阴影

8 个答案: