溢出:自动浮动和溢出:可见

时间:2013-05-24 13:11:10

标签: html css css-float

我正在尝试使用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;
}

2 个答案:

答案 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;
}

See the JSFiddle

答案 1 :(得分:0)

尝试将溢出更改为“可见”

overflow: visible;