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

Question

我有一个包含两个元素的容器 div。在调整大小时，一个内部 div 移动到另一个下面。

但是这里的要求是当一个 div 移动到另一个 div 下时调整大小，第一个 div 应该占据父级的整个宽度。

真正的问题有很多div。如果你愿意，你也可以尝试多个。但是找到一个通用的解决方案。

这是 fiddle

div fiddle

这里是 HTML 和 CSS

<div class="cont">
  <div class='inner'></div>
  <div class='inner'><div>
</div>

尝试提供一个 CSS 解决方案，因为我知道可以使用 css 对齐容器以调整子 div。

.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;
}

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;
    }
}