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

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

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

谢谢你的任何建议！

最佳答案

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

ottom-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; }
            }
        ottom-floaty">
            I'm a sometimes floaty div
        ottom-floaty">
            I'm also a sometimes floaty div
        

这是我看到的效果：

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,如示例所示.

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

原文地址：https://www.jb51.cc/html/426762.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。