html 垂直float,CSS：“float：bottom”如果有可用的垂直空间. “浮动：离开”否则...

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

gt;

这是我看到的效果：

有关视口高度的相关代码段：

The ‘height’ media feature describes the height of the targeted display area of the output device. For continuous media,this is the height of the viewport including the size of a rendered scroll bar (if any). For paged media,this is the height of the page Box.

A specified cannot be negative.

有时我发现Mozilla开发者网络更容易访问,但在这种情况下,它们提供了basically the same information.

您是否需要支持无法呈现媒体查询的旧浏览器？编写一个javascript polyfill应该可以相当简单,特别是使用像jQuery这样的库.

编辑

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

Jashwant: putting the div below the other is always preferred. So it’s only in the case that there’s space to the right but not at the bottom,that div2 should go to the right of div1. – Jonas

我还将宽度设置为400px,如示例所示.

现在只有在屏幕太短而不能垂直的情况下才会向左浮动,并且右侧有足够的空间来容纳两者.否则它总是垂直的.