0

我试图在我的页面上浮动一个元素作为右侧边栏，但是为了降低屏幕尺寸，将元素放在内容下方和页脚上方。这是我到目前为止所拥有的：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但显然这不起作用。有什么想法或建议吗？

4

1 回答 1

3

您必须更改侧边栏和内容的顺序（内容更重要）。见小提琴

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%;
    }
}
于 2014-05-23T18:57:03.520 回答