Question

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

从某种意义上说，我要求与“浮动：左”相反。 float：如果浏览器窗口中有足够的水平空间，则左对齐水平div，如果只有可用空间，则只有float divs低于其他位置。

感谢您的任何建议！

Answer 1

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

<!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>

这是我看到的效果： In a tall window In a short window

CSS3媒体查询允许您根据视口高度设置您喜欢的任何规则。 The w3c has lots of information about media queries.

有关视口高度的相关摘录：

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

指定不能为负数。

有时我发现Mozilla开发者网络更易于访问，但在这种情况下，它们会提供basically the same information。

您是否需要支持无法呈现媒体查询的旧浏览器？编写javascript polyfill可能会相当简单，尤其是使用像jQuery这样的库。

修改

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

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

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

现在只有在屏幕太短而无法垂直和的情况下，它才会向左浮动。右边有足够的空间来容纳两者。否则它总是垂直的。

Answer 2

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

CSS：＆＃34; float：bottom＆＃34;如果有垂直空间。＆＃34;浮动：左＆＃34;除此以外

2 个答案:

CSS：＆＃34; float：bottom＆＃34;如果有垂直空间。 ＆＃34;浮动：左＆＃34;除此以外

2 个答案:

CSS：＆＃34; float：bottom＆＃34;如果有垂直空间。＆＃34;浮动：左＆＃34;除此以外