我已经搜索了几个小时,找不到适合我问题的可行解决方案,因此,我可以为您提供一些建议。
我想要的是一个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/