在浮动div周围调整div(宽度)

Question

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

我想要的是一个包裹在里面的一些浮动div的div.包装高度对我来说没有问题,但是如果将浏览器调整为宽度(浮动元素向下跳跃),则宽度不会正确换行.

这里有一些示例代码:

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

您能否使用 width 或 min-width 将 div 保持在“桌面”上 780px，然后在会导致块换行的较低屏幕宽度上，将父级的宽度设置为 390px。将这些包含在适当的媒体查询中并鲍勃你的叔叔......

华泰