Question

我有一个容器div，它有两个元素。调整另一个内部div移动的大小。

但是，这里的要求是在一个div移动到另一个div下时调整大小，第一个<div class="cont"> <div class='inner'></div> <div class='inner'><div> </div>应该占据父级的整个宽度。

真正的问题有许多div。如果你想要你也可以尝试多个。但找到一个共同的解决方案。

这是小提琴

div fiddle

这是HTML和CSS

.cont {
    width:100%;
    background-color:yellow;
    overflow:hidden;
    white-space:nowrap;
    height:100px;
}
.inner {
    width:200px;
    height:80px;
    margin:4px;
    border:1px solid black;
    float:left;
    display:block;
}

尝试提供CSS解决方案，因为我知道可以使用css来捕捉容器以调整子div。

{{1}}

Answer 1

我玩了一下，我能用媒体查询来解决它。查看演示here，以下是代码：

.cont {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: yellow;
    overflow: hidden;
    white-space: nowrap;
}

.inner {
    width: 200px;
    height: 80px;
    margin: 4px;
    border: 1px solid black;
    float: left;
    display: block;
}

@media (max-width: 435px) {
    .inner {
        width: auto;
        float: none;
        position: relative;
        left: 0;
        right: 0;
    }

    .cont {
        height: auto;
    }
}

Answer 2

您可以尝试为包含div提供显示值table-cell。

选中DEMO。

使子div在调整大小时占据整个父空间

2 个答案: