Деградация CSS Float справа вниз

Я пытаюсь разместить элемент на своей странице в виде правой боковой панели, но чтобы включить деградацию, поместите элемент ниже содержимого и над нижним колонтитулом для меньших размеров экрана. Вот что у меня есть: 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, но, очевидно, это не сработало. Любые идеи или предложения?


html css css-float graceful-degradation
person amaster    schedule 23.05.2014    source источник
comment
Вы не можете сделать это только с помощью «обычного» CSS (если только вы не хотите использовать flexbox), если боковая панель является первым элементом в вашем коде/DOM. Вам нужно будет изменить порядок #sidebar и #content, чтобы это стало возможным.   -  person CBroe    schedule 23.05.2014

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны изменить порядок боковой панели и контента (контент важнее для начала). См. скрипку

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%;
    }
}
person Mario J Vargas    schedule 23.05.2014
comment
спасибо, вы гений и ученый. Это простые вещи в жизни, которые я забываю. Я пробовал очень похоже, но я забыл сделать поплавок, оставленный на содержимом! - person amaster; 23.05.2014