我已经搜索了几个小时,找不到适合我问题的可行解决方案,因此,我可以为您提供一些建议。

我想要的是一个div,其中包含一些 float 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。

最佳答案

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

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

有关示例,请参见this codepen:

关于css - 使div(宽度)适合 float div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13441244/

10-12 00:17
查看更多