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

发布时间：2020-12-14 23:17:43 所属栏目：资源来源：网络整理

导读：我有两个非常窄(宽度：400像素)的div,如果浏览器窗口中有足够的垂直空间,则应垂直堆叠.如果浏览器高度太小并且有足够的空间,则“底部div”应浮动到顶部div的右侧. 从某种意义上说,我要求与“浮动：左”相反. float：如果浏览器窗口中有足够的水平空间,则left

我有两个非常窄(宽度：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,如示例所示.
现在只有在屏幕太短而不能垂直的情况下才会向左浮动,并且右侧有足够的空间来容纳两者.否则它总是垂直的.


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!