5

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

我想要的是一个包含一些浮动 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 也可以。

4

7 回答 7

1

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

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

有关示例，请参见此代码笔：

于 2012-11-18T15:27:55.607 回答
0

谢谢大家的帮助，

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

谢谢！

于 2012-11-18T19:22:32.710 回答
0

添加

    white-space: nowrap;

到 .wrapper

于 2012-11-18T15:25:32.977 回答
0

修改这个类怎么样

.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;
于 2012-11-18T15:29:00.580 回答
0

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

高温高压

于 2012-11-18T15:11:14.277 回答
0

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

使用$(window).resize

和：Javascript 浏览器宽度

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

于 2012-11-18T15:11:17.960 回答
0 
<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;

}
于 2012-11-20T07:11:09.430 回答