Question

我在父div中有一个子div，以使子div响应。我想让父母div也做出反应，但经过几天的搜索，我找不到任何解决方案。

我的代码：

CSS

.parent {
    width: 100%;
    height: auto;
    margin: 0 auto 0 auto;
    background-color: #b5b5b5;
    overflow: hidden;
    position: relative;
}
.css-slideshow {
    position: relative;
    max-width: 1050px;
    height: 345px;
    margin: 3.5em auto auto auto;
    z-index: 1;
}
.css-slideshow div {
    margin: 0;
    position: absolute;
    max-width:100% !important;
    height:auto;
}
.css-slideshow img {
    box-shadow: 0 0 2px #666;
    max-width:100% !important;
    height:auto;
}

HTML

<div class="parent">
    <div class="css-slideshow">
        <div>
            <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
        </div>
    </div>
</div>

这里是jsfiddle。

灰色部分是我想要响应的父div，因此当分辨率降低时，它的底部与子div（css-slideshow）的底部对齐。我不确定它是否有所作为，但我希望父div的高度能够响应，而不是它的宽度，它被设置为100％以使其延伸整个页面。

注意：图像上方的空格（儿童div：css-slideshow）是有意的;它为导航栏腾出空间。 css-slideshow中的z-index是为了让它落后于响应式下拉菜单。

感谢阅读！

Answer 1

如果你摆脱了这个位置：孩子的绝对位置和父亲的身高，它似乎有效。有没有理由让你的位置绝对？ http://jsfiddle.net/nupebzh4/4/

当你把孩子的位置：绝对时，它就把它从dom流中取出来了。这使得父母不知道内容有多高，这就是你必须硬编码高度的原因。如果您将子项放回流中，则父容器可以自动调整大小以包含内容，因为它不需要对高度进行硬编码，因此会更改大小。

.parent {
    width: 100%;
    height: auto;
    margin: 0 auto 0 auto;
    background-color: #b5b5b5;
    overflow: hidden;
    position: relative;
}
.css-slideshow {
    position: relative;
    max-width: 1050px;
    margin: 3.5em auto auto auto;
    z-index: 1;
}
.css-slideshow div {
    margin: 0;
    max-width:100% !important;
    /* responsive */
    height:auto;
}
.css-slideshow img {
    box-shadow: 0 0 2px #666;
    max-width:100% !important;
    /* responsive */
    height:auto;
}

Answer 2

我改变了你的css：

删除溢出：隐藏
评论了.css-slideshow
删除身高：自动

http://jsfiddle.net/nupebzh4/5/

.parent {
        width: 100%;
        margin: 0 auto 0 auto;
        background-color: #b5b5b5;
        position: relative;
        display:inline-block;
     }

.css-slideshow {
    position: relative;
    max-width: 1050px;
    /*height: 345px;*/
    margin: 3.5em auto auto auto;
    z-index: 1;
}

.css-slideshow div {
    margin: 0;
    position: absolute;
    width:100%;
}

.css-slideshow img {
    box-shadow: 0 0 2px #666;
    width:100%;
}

CSS - 如何让父div响应？

2 个答案: