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

Question

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

Jon*_*løv 5 html css css-float

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

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

谢谢你的任何建议!

Answer 1

Phi*_*hil 8

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

<!doctype html>
<html>
    <head>
        <style>
            /* 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; }
            }
        </style>
    </head>
    <body>
        <div class="bottom-floaty">
            I'm a sometimes floaty div
        </div>
        <div class="bottom-floaty">
            I'm also a sometimes floaty div
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是我看到的效果: 在一个高大的窗户在一个短暂的窗口