5

如果浏览器窗口中有足够的垂直空间，我有两个非常窄（宽度：400 像素）的 div 应该垂直堆叠。如果浏览器高度太小并且右侧有足够的空间，“底部 div”应该浮动到顶部 div 的右侧。

从某种意义上说，我要求与“float:left”相反。float:left 如果浏览器窗口中有足够的水平空间，则水平对齐 div，如果只有它们下方的可用空间，则仅将 div 浮动到其他 div 下方。

感谢您的任何建议！

4

2 回答 2

8

根据您需要的浏览器支持级别，一个简单的媒体查询可能会解决您的问题：

<!doctype html>
<html>
    <head>
        <style>
            /* SET THE DEFAULT RULES FOR SHORT SCREENS */
            .bottom-floaty {
                height:200px;
                width: 400px;
                margin: 15px; padding: 10px;
                outline: 1px dashed #aaf;
                }
            /* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */
            @media all and (max-height: 500px) {
                .bottom-floaty { float:left; }
            }
        </style>
    </head>
    <body>
        <div class="bottom-floaty">
            I'm a sometimes floaty div
        </div>
        <div class="bottom-floaty">
            I'm also a sometimes floaty div
        </div>
    </body>
</html>

这是我看到的效果： 在高高的窗户里 在一个短暂的窗口

CSS3 媒体查询允许您根据视口高度设置任何您喜欢的 CSS 规则。w3c 有很多关于媒体查询的信息。

关于视口高度的相关片段：

“高度”媒体特征描述了输出设备的目标显示区域的高度。对于连续媒体，这是视口的高度，包括渲染滚动条的大小（如果有）。对于分页媒体，这是页面框的高度。

A 指定的不能为负数。

有时我发现 Mozilla 开发者网络更容易访问，但在这种情况下，它们提供的信息基本相同。

您是否需要支持无法呈现媒体查询的旧浏览器？编写一个可以产生相同效果的 javascript polyfill应该相当简单，尤其是使用像jQuery这样的库。

编辑

我修改了我的代码示例以更接近您的问题。你评论说：

Jashwant：总是首选将 div 放在另一个下方。所以只有在右边有空间但底部没有空间的情况下，div2应该到div1的右边。– 乔纳斯

而且我还将宽度设置为 400px，如您的示例所示。

现在，如果屏幕太短而无法垂直，并且右侧有足够的空间容纳两者，它只会向左浮动。否则它总是垂直的。

于 2012-06-08T14:33:11.483 回答
3

如果您不想使用float:left;属性，则您的每个 DIV 都会下降到新行。所以使用 float left 属性。当你想要换行时，只需使用clear:both;

于 2012-06-08T12:55:58.750 回答