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

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

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

有关示例，请参阅this codepen：

Answer 2

不能使用宽度或最小宽度来保持div 780px在“桌面”上，然后在较低的屏幕宽度上，这将导致块包裹，将父级的宽度设置为390px。将它们包裹在适当的媒体查询中，然后让你的叔叔摆脱......

HTH

Answer 3

Javascript很可能是唯一的方式......

使用$(window).resize

和：Javascript Browser Width

一旦知道浏览器的宽度，就可以划分可用空间并指定包装器div的宽度，从而包装浮动div。

Answer 4

添加

    white-space: nowrap;

到.wrapper

Answer 5

如何修改此类

.wrapper {
border: solid 1px red;
display:table;
**white-space:nowrap;**
}

或者如果您想进行左侧div修复，那么如果窗口大小只更改，则右侧div将调整大小

为正确的div做这个：

display: block;
position: absolute;
top:0; 
right:0;
margin-left: *your_fixed_left* px;

Answer 6

感谢所有人的帮助，

我最终通过读取窗口大小并手动设置包装宽度来使用一些JavaScript。

谢谢！

Answer 7

<div class="wrapper">

    <div style="display:table-row">

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

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

    </div>

</div>



.wrapper {

    border: solid 1px red;
    display: table;

}

.block1 {

    display:table-cell;
    width: 390px;
    height: 390px;
    background-color: blue;

}

.block2 {

    display:table-cell;
    width: 390px;
    height: 390px;
    background-color: yellow;

}

在浮动div周围调整div（宽度）

7 个答案: