CSS浮动降级从右到下答案

【问题标题】：CSS Float Degradation Right to BottomCSS浮动降级从右到下
【发布时间】：2014-07-13 05:45:23
【问题描述】：

我试图在我的页面上浮动一个元素作为右侧边栏，但为了能够降级以将元素放在内容下方和页脚上方以用于较小的屏幕尺寸。这是我目前所拥有的：JSFiddle

<html>
<head>
<style type="text/css">
.footer{
    clear:both;
    width:100%;
    height:20px;
}

.sidebar{
    //float:bottom;
}

@media (min-width : 400px){
    .sidebar {
        //float:right;
        //width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}@media (min-width : 500px){
    .sidebar {
        float:right;
        width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}
</style> 
</head>
<body>
    <div class='sidebar'>
        <p>SIDEBAR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec arcu sed ipsum placerat ornare id ut augue. Aliquam erat volutpat. Morbi laoreet tellus purus, vitae feugiat elit accumsan tincidunt. Pellentesque magna metus, pharetra ut mollis vel, dictum in purus. Mauris bibendum euismod lorem, luctus gravida turpis.</p>
    </div>
    <div class='content'>
        <div class='grid'>
            <h2>Section 1</h2>
            <div class='element'>
                <p>Box 1</p>
            </div>
            <div class='element'>
                <p>Box 2</p>
            </div>
            <div class='element'>
                <p>Box 3</p>
            </div>
            <div class='element'>
                <p>Box 4</p>
            </div>
            <div class='element'>
                <p>Box 5</p>
            </div>
        </div>
        <div class='grid'>
            <h2>Section 2</h2>
            <div class='element'>
                <p>Box 6</p>
            </div>
            <div class='element'>
                <p>Box 7</p>
            </div>
            <div class='element'>
                <p>Box 7</p>
            </div>
            <div class='element'>
                <p>Box 9</p>
            </div>
        </div>
    </div>
    <div class='footer'>
        <p>FOOTER: Lorem ipsum dolor sit amet.</p>
    </div>
</body>
</html>

我的问题是，当屏幕小于 500 像素时，侧边栏会转到顶部而不是底部。我似乎无法弄清楚如何让它“漂浮”到底部。在我尝试过float:bottom 的内容下方，但显然这不起作用。有什么想法或建议吗？

【问题讨论】：

只要侧边栏是代码/DOM 中的第一个元素，您不能仅使用“常规”CSS 来做到这一点（除非您想使用 flexbox）。您必须更改#sidebar 和#content 的顺序才能实现。

标签： html css css-float graceful-degradation

【解决方案1】：

您必须更改侧边栏和内容的顺序（内容开始更重要）。 See fiddle

HTML：

<div class='content'>
    <div class='grid'>
        <h2>Section 1</h2>
        <div class='element'>
            <p>Box 1</p>
        </div>
        <div class='element'>
            <p>Box 2</p>
        </div>
        <div class='element'>
            <p>Box 3</p>
        </div>
        <div class='element'>
            <p>Box 4</p>
        </div>
        <div class='element'>
            <p>Box 5</p>
        </div>
    </div>
    <div class='grid'>
        <h2>Section 2</h2>
        <div class='element'>
            <p>Box 6</p>
        </div>
        <div class='element'>
            <p>Box 7</p>
        </div>
        <div class='element'>
            <p>Box 7</p>
        </div>
        <div class='element'>
            <p>Box 9</p>
        </div>
    </div>
</div>

<div class='sidebar'>
    <p>SIDEBAR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec arcu sed ipsum placerat ornare id ut augue. Aliquam erat volutpat. Morbi laoreet tellus purus, vitae feugiat elit accumsan tincidunt. Pellentesque magna metus, pharetra ut mollis vel, dictum in purus. Mauris bibendum euismod lorem, luctus gravida turpis.</p>
</div>
<div class='footer'>
    <p>FOOTER: Lorem ipsum dolor sit amet.</p>
</div>

CSS

.footer{
    clear:both;
    width:100%;
    height:20px;
}

.sidebar{
    float: right;
}

.content {
    float: left;
}

@media (min-width : 400px){
    .sidebar {
        //float:right;
        //width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}

@media (min-width : 500px){
    .sidebar {
        float:right;
        width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}

【讨论】：

谢谢你，你是一个天才和一个学者。这是我忘记的生活中简单的东西。我尝试了非常相似的方法，但我忘记在内容上做浮动了！