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

Question

我有以下情况,并且不想为此使用JS:

有一个标题(蓝色)然后一个div可能包含内容(如果不是它应该完全崩溃)然后是身体(灰色).

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

到目前为止,我发现的唯一"解决方案"是设置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;
}