2

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

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

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

这是小提琴

div 小提琴

这是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;
}
4

2 回答 2

1

我玩了一下，我能够通过媒体查询来解决它。在这里查看演示，这里是代码：

.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;
    }
}
于 2013-09-28T08:52:01.577 回答
-1

您可以尝试给包含 div 的显示值table-cell。

检查这个演示。

于 2013-09-28T08:17:41.643 回答