css - 在 float div 周围调整 div(宽度)

Question

我现在已经搜索了几个小时，但找不到解决我的问题的可行解决方案，所以我有你可以给我一些建议。

我想要的是一个包含一些 float div 的 div。环绕高度对我来说没问题，但如果将浏览器的大小调整为 float 元素向下跳动的宽度，则宽度不会正确环绕。

这里是一些示例代码:

HTML:

<div class="wrapper">

    <div class="block1">
    </div>

    <div class="block2">
    </div>
</div>

CSS:

body {
    border: solid 1px green;
}

.wrapper {
    border: solid 1px red;
    display: table;
}

div {
    display: block; 
}

.block1 {
    float: left;
    width: 390px;
    height: 390px;
    background-color: blue;
}

.block2 {
    float: left;
     width: 390px;
    height: 390px;
    background-color: yellow;
}

所以基本上我希望包装 div 始终具有内部 div 所需的宽度。通过调整窗口大小并让右侧的 div 跳到左侧下方，对于此示例，包装 div 现在的宽度应该为 390px。

我需要这个解决方案用于我正在尝试制作的响应式网站，而且我需要尽快得到它。

首选纯 CSS 解决方案，但 JS 或 jquery 也可以。

Answer 1

您可以在包装器 div 上使用 CSS 媒体查询。像这样:

@media (max-width: 783px) {
 .wrapper {
    max-width: 390px;
  }
}

参见 this codepen例如: