强制围绕div封闭元素

我有一个容器div应该改变环绕它的内容产生一个有边界的效果但是由于某种原因div似乎只是在页面顶部显示为一条线。下面的图片显示了我想要达到的效果，但从 Fiddle可以看出它不起作用。强制围绕div封闭元素

有什么建议吗？

Code enclosed in Fiddle.

2012-12-12 jezzipin

这是因为div的内容是左浮动而div不是。将float: left;应用于带边框的div，它的工作原理如下：http://jsfiddle.net/9yUX3/7/

2012-12-12 16:38:11 Andy

欢呼的方式。任何指针如何实现阴影边界效果？ – jezzipin

CSS3 box shadow：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp（不要为我的w3schools链接杀死我） – Andy

我发现的另一个古怪的技巧是，如果容器的高度设置为'auto'并且应用'overflow：hidden';'它会将父容器拉伸到所需的大小，而不是隐藏孩子。 – CD001

解决此问题的另一种方法是将overflow：hidden（或auto）应用于.boxed_content DIV。这对你来说可能会更好，因为将float应用于容器可能会让你的布局变得更糟。

.boxed_content { 
    border: 1px solid black; 
    box-shadow: 0px 0px 5px 5px #c4c4c4; 
    overflow:hidden; 
}

2012-12-12 16:45:42

这就是我已经做到的方式;） – CD001

2012-12-12 18:44:17 Eric

回答