我正在尝试使用box-shadow
创建两个浮动div来显示其容器外部的阴影。它不会显示,因为它们的父设置overflow: auto
设置,这会切断阴影,但仍然是必要的,因此父设备不会崩溃,因为两个子div
都是浮动的。如果我将父项设置为overflow: visible
,它显然会崩溃,因为孩子们会浮动。谢谢你的帮助。
JS小提琴:http://jsfiddle.net/zJGVz/
HTML
<div id='parent'>
<div id='child1'></div>
<div id='child2'></div>
</div>
CSS:
#parent {
margin: 0 auto;
width: 200px;
background: green;
overflow: auto;
}
#child1 {
width: 150px;
height: 200px;
float: left;
background: pink;
box-shadow: 0 0 10px 0 #000000;
}
#child2 {
width: 30px;
height: 200px;
float: left;
margin-left: 20px;
background: blue;
box-shadow: 0 0 10px 0 #000000;
}
答案 0 :(得分:1)
您可以向触及父母边缘的两个孩子添加5px margin
。
#child1 {
width: 700px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 0 5px 5px;
}
#child2 {
width: 300px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 5px 5px 0;
}
答案 1 :(得分:0)
尝试将溢出更改为“可见”
overflow: visible;