我有两个非常窄(宽度：400像素)的div,如果浏览器窗口中有足够的垂直空间,则应垂直堆叠.如果浏览器高度太小并且有足够的空间,则“底部div”应浮动到顶部div的右侧.
从某种意义上说,我要求与“浮动：左”相反. float：如果浏览器窗口中有足够的水平空间,则left align divs水平,如果只有其他可用空间,则只有float divs低于其他.
谢谢你的任何建议！
这是我看到的效果：
CSS3媒体查询允许您根据视口高度设置任何您喜欢的规则. The w3c has lots of information about media queries.
有关视口高度的相关代码段：
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,如示例所示.
现在只有在屏幕太短而不能垂直的情况下才会向左浮动,并且右侧有足够的空间来容纳两者.否则它总是垂直的.
