用内容扩展多个 div

Question

我目前有几个 div 为内容创建了一个区域。两个 div 在 x 轴上扩展以填充页面边缘，而两个向下扩展直到内容停止。我在每个 div (62px x 62px) 中使用不同的背景图片，在扩展的四个 div 中重复。

当我将外部 div 高度设置为“自动”时，其他 div 会爆炸但是，设置高度值可以正常工作吗？如何让我的内容控制父 div 的高度调整，而不会导致子 div 爆炸？

提前致谢！

test site

HTML

<div id="video_outer">
<div id="video">
    <div id="v_top_left">
    </div>
        <div id="v_top">
        </div>
        <div id="v_top_right">
        </div>
        <div id="v_left">
        </div>
        <div id="v_right">
        </div>
        <div id="v_bottom_left">
        </div>
        <div id="v_bottom">
        </div>
        <div id="v_bottom_right">
        </div>  
   </div>
<div id="v_content">
    Content
    <br />
    More Content
</div>

CSS

#video_outer {
    width: 100%;
    height: 300px;        /* <<<<--- This needs to be auto */
    min-height: 100px;
    padding-bottom: 62px;

}

#v_content {
    width: auto;
    height: 200px;
    top: -550px;
    left: 0px;
    position: relative;
    padding-left: 62px;
    padding-top: 62px;
    margin-right: 62px;
    z-index: 2;
}

#video {
    width: 100%;
    height: 100%;
    padding-bottom: 62px;
    background-image: url(images/content_fill_red.png);
    background-repeat: repeat-x repeat-y;
    position: relative;
    left: 0px;
    z-index: 2;
}

#v_top_left {
    background-image: url(images/content_top_left_red.png);
    background-repeat: no-repeat;
    position: relative;
    left: 0px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

#v_top {
    background-image: url(images/content_top_red.png);
    background-repeat: repeat-x;
    position: relative;
    left: 0px;
    top: -62px;
    width: auto;
    height: 62px;
    z-index: 5;
    margin-right: 62px;
}

#v_top_right {
    background-image: url(images/content_top_right_red.png);
    background-repeat: no-repeat;
    position: relative;
    margin-left: auto;
    top: -124px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

#v_left {
    background-image: url(images/content_left_red.png);
    background-repeat: repeat-y;
    position: relative;
    top: -124px;
    left: 0px;
    width: 62px;
    height: 100%;
    z-index: 5;
}

#v_right {
    background-image: url(images/content_right_red.png);
    background-repeat: repeat-y;
    position: absolute;
    top: 62px;
    right: 0px;
    /*margin-left: auto;*/
    width: 62px;
    height: 100%;
    z-index: 5;
}

#v_bottom_left {
    background-image: url(images/content_bottom_left_red.png);
    background-repeat: no-repeat;
    position: relative;
    left: 0px;
    top: -124px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

#v_bottom {
    background-image: url(images/content_bottom_red.png);
    background-repeat: repeat-x;
    position: relative;
    left: 0px;
    top: -186px;
    width: auto;
    height: 62px;
    z-index: 5;
    margin-right: 62px;
}

#v_bottom_right {
    background-image: url(images/content_bottom_right_red.png);
    background-repeat: no-repeat;
    position: relative;
    margin-left: auto;
    top: -248px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

Answer 1

尝试将display: inline-block; 的属性赋予divs