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

Phil..

8

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

/* 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; }

}

这是我看到的效果:

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

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

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

指定不能为负数.

有时我发现Mozilla Developer Network更容易访问,但在这种情况下,它们提供的信息基本相同.

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

编辑

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

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

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

现在,它只有在屏幕太短,他们是垂直的浮动左和有足够的空间在右边,以适应两者.否则它总是垂直的.