我正在尝试使用 box-shadow
制作两个 float 的 div,以显示其容器外的阴影。它不会显示,因为它们的父级设置了 overflow: auto
,它切断了阴影,但仍然是必要的,这样父级就不会崩溃,因为两个子级 div
float 。如果我将父级设置为 overflow: visible
,它显然会崩溃,因为子级是 float 的。感谢您的帮助。
JS fiddle :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;
}
最佳答案
您可以在接触父级边缘的两侧为两个子级添加 5px 边距
。
#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;
}
关于html - 溢出 :auto with floats AND overflow:visible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16735787/