CSS浮动从右到下的退化

我试图在我的页面上浮动一个元素作为右边栏，但为了使元素在内容下方和页脚上方的屏幕尺寸更小。下面是我目前的代码: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>

我的问题是，当屏幕小于500px时，侧边栏会到顶部而不是底部。我似乎不知道如何让它"浮"到底部。在内容下面，我尝试了float:bottom，但显然没有工作。有什么想法或建议吗?

您必须更改侧边栏和内容的顺序(内容更重要的是开始)。看到小提琴

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

相关内容

最新更新

热门标签：