如何将div设置为儿童的外部高度？

Question

我有以下情况，并且不想为此使用JS：

有一个标题（蓝色），然后是一个可能包含内容的div（如果不是它应该完全崩溃）然后是正文（灰色）。

现在我想用左边和右边的绿色边框来填充标题和正文之间的整个空隙。差距是由带有红色边框的div上的margin: 10px;引起的。

到目前为止，我发现的唯一“解决方案”是将padding: 1px 0;设置为带有绿色边框的div（请参阅小提琴中的注释行）。是否有更好的解决办法迫使div或边界覆盖孩子占据的整个高度，如果没有孩子则完全崩溃？

我无法控制div中的内容，因此不使用margin不是解决方案。

小提琴：http://jsfiddle.net/w5NW4/1/

Answer 1

我猜你看起来像这样： - DEMO

将overflow:hidden提供给您的横幅类以获得所需的结果..

<强> CSS

 .banner {
    border-left: 1px solid #008000;
    border-right: 1px solid #008000;
    overflow: hidden;
}

Answer 2

您可以尝试使用overflow: auto;属性，而不是使用padding。 它会起作用。

在小提琴上查看：http://jsfiddle.net/w5NW4/3/

.banner{
    border-left: 1px solid green;
    border-right: 1px solid green;
    overflow: auto;
}

Answer 3

另一种解决方案是将padding: 10px;提供给.banner并从banner子元素中删除margin: 10px;。

<强> Working Fiddle

另外，尽量避免使用内联样式。