Question

我正在尝试将一个元素浮动到我的页面上作为右侧边栏，但是要使降级能够将元素放在内容下方和页脚上方以获得更小的屏幕尺寸。以下是我到目前为止：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的内容下面，但显然这不起作用。有什么想法或建议吗？

Answer 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%;
    }
}

CSS Float Degradation从右到右

1 个答案: