Question

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

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

提前致谢！

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

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

使用内容扩展多个div

1 个答案: