CSS перенос двух столбцов (основное содержимое и строка меню) - PullRequest
Новая
       0

CSS перенос двух столбцов (основное содержимое и строка меню)

0 голосов
/ 05 февраля 2020

Я хочу, чтобы строка меню находилась в правой части страницы, а под ней было обернуто содержимое главной страницы. Используя float:right; в CSS, я могу достичь желаемого результата для настольного компьютера, хотя для Mobile строка меню располагается над контентом, когда я хочу, чтобы он находился под ним.

Я пробовал методы (такие как гибкие таблицы / переупорядочение) безрезультатно. Любые мысли, чтобы указать мне в правильном направлении, будет принята с благодарностью. 

.content {
    display: block;
    background: #f5f5f5;
    width: 100%;
}

.information {
    background: #ddd;
    padding: 10px;
    width: 100;
    display: block;
}

.menu {
    width: 100%;
    display: block;
}

.side-info {
    display: block;
    text-align: center;
    font-size: 13px;
    padding: 10px 20px;
}

.colour-1 {
    background: pink;
}

.colour-2 {
    background: lightblue;
}

@media all and (min-width: 992px) {
    .content {
        max-width: 1200px;
        background: #ccc;
        margin: 0 auto;
    }

    .information {
        width: auto;
    }

    .menu {
        width: 250px !important;
        display: block;
        float: right;
    }
}
<section class="content">

    <aside class="menu">
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
    </aside>

    <div class="information">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non. Duis cursus, ligula quis porta scelerisque, nunc nunc gravida neque, faucibus varius erat est non ipsum. Nunc vitae risus maximus, luctus turpis nec, facilisis justo. Pellentesque fermentum, nulla nec accumsan luctus, elit dolor tincidunt dui, vel imperdiet tortor massa et magna. Duis volutpat suscipit luctus. Sed sit amet nulla mollis, volutpat diam eu, lacinia velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lobortis urna ante, imperdiet ornare diam aliquet in. Vestibulum quis purus ultricies, pretium nulla id, maximus risus. Nunc volutpat, leo vitae imperdiet consectetur, elit odio ornare ipsum, sed fringilla diam lectus vel purus. Aenean quis diam sem. Donec quis tincidunt neque, quis eleifend felis. In hac habitasse platea dictumst. Praesent scelerisque, sapien vitae condimentum vestibulum, neque tellus tempus erat, et interdum arcu velit vel ipsum.</p>
        <p>In blandit sed augue nec hendrerit. Curabitur sed finibus mi. Donec in laoreet sapien, ac blandit odio. In hac habitasse platea dictumst. Donec vel lorem vitae lacus placerat facilisis. Etiam tortor dui, consequat sit amet lorem eu, lacinia eleifend tellus. Sed tristique tincidunt iaculis. Suspendisse laoreet augue leo, eu hendrerit neque pellentesque sed.</p>
        <p>Aliquam a suscipit ante. Sed fermentum eros a libero pellentesque imperdiet. Maecenas bibendum lobortis scelerisque. Sed nisi arcu, tristique sit amet lectus sit amet, suscipit gravida ex. Ut ut tortor cursus nulla lobortis posuere non vitae libero. Aliquam vitae neque ornare, tincidunt nibh ac, accumsan magna. In ut malesuada sem. Fusce non porttitor ante.</p>
        <p>Nulla at leo eget eros congue aliquet. Vivamus tincidunt erat ligula, sed tincidunt purus ullamcorper sit amet. Vestibulum suscipit molestie lectus in sagittis. Ut ipsum urna, tempor eget libero sagittis, gravida fringilla orci. Sed efficitur porta enim, eu auctor neque dignissim non. Suspendisse vitae purus at purus tristique pulvinar. Ut sed eros commodo, luctus diam sit amet, pulvinar tellus. </p>
    </div>

</section>

enter image description here

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Если вы хотите сделать это с flexbox, вы можете просто использовать flex-wrap: wrap-reverse;

Рабочий пример ниже: 

.content {
    display: flex;
    background: #f5f5f5;
    width: 100%;
    flex-wrap: wrap-reverse;
}

.information {
    background: #ddd;
    padding: 10px;
    width: 100;
    display: block;
}

.menu {
    width: 100%;
    display: block;
}

.side-info {
    display: block;
    text-align: center;
    font-size: 13px;
    padding: 10px 20px;
}

.colour-1 {
    background: pink;
}

.colour-2 {
    background: lightblue;
}

@media all and (min-width: 992px) {
    .content {
        display: block;
        max-width: 1200px;
        background: #ccc;
        margin: 0 auto;
    }

    .information {
        width: auto;
    }

    .menu {
        width: 250px !important;
        float: right;
    }
}
<section class="content">

    <aside class="menu">
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
    </aside>

    <div class="information">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non. Duis cursus, ligula quis porta scelerisque, nunc nunc gravida neque, faucibus varius erat est non ipsum. Nunc vitae risus maximus, luctus turpis nec, facilisis justo. Pellentesque fermentum, nulla nec accumsan luctus, elit dolor tincidunt dui, vel imperdiet tortor massa et magna. Duis volutpat suscipit luctus. Sed sit amet nulla mollis, volutpat diam eu, lacinia velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lobortis urna ante, imperdiet ornare diam aliquet in. Vestibulum quis purus ultricies, pretium nulla id, maximus risus. Nunc volutpat, leo vitae imperdiet consectetur, elit odio ornare ipsum, sed fringilla diam lectus vel purus. Aenean quis diam sem. Donec quis tincidunt neque, quis eleifend felis. In hac habitasse platea dictumst. Praesent scelerisque, sapien vitae condimentum vestibulum, neque tellus tempus erat, et interdum arcu velit vel ipsum.</p>
        <p>In blandit sed augue nec hendrerit. Curabitur sed finibus mi. Donec in laoreet sapien, ac blandit odio. In hac habitasse platea dictumst. Donec vel lorem vitae lacus placerat facilisis. Etiam tortor dui, consequat sit amet lorem eu, lacinia eleifend tellus. Sed tristique tincidunt iaculis. Suspendisse laoreet augue leo, eu hendrerit neque pellentesque sed.</p>
        <p>Aliquam a suscipit ante. Sed fermentum eros a libero pellentesque imperdiet. Maecenas bibendum lobortis scelerisque. Sed nisi arcu, tristique sit amet lectus sit amet, suscipit gravida ex. Ut ut tortor cursus nulla lobortis posuere non vitae libero. Aliquam vitae neque ornare, tincidunt nibh ac, accumsan magna. In ut malesuada sem. Fusce non porttitor ante.</p>
        <p>Nulla at leo eget eros congue aliquet. Vivamus tincidunt erat ligula, sed tincidunt purus ullamcorper sit amet. Vestibulum suscipit molestie lectus in sagittis. Ut ipsum urna, tempor eget libero sagittis, gravida fringilla orci. Sed efficitur porta enim, eu auctor neque dignissim non. Suspendisse vitae purus at purus tristique pulvinar. Ut sed eros commodo, luctus diam sit amet, pulvinar tellus. </p>
    </div>

</section>
0 голосов
/ 05 февраля 2020

Попробуйте использовать flex - это просто.

  1. Не используйте display: block для элементов <div>, поскольку это свойство используется по умолчанию.
  2. Swap .information и <aside> блоков. 
<style>
    .content {
        display: flex;
        flex-wrap: nowrap;
        background: #ccc;       
        max-width: 1200px;
        margin: 0 auto;
    }
    .information {background: #ddd; padding: 10px; width: 100;}
    .menu {
        flex: 0 0 250px;
    }
    .side-info {display:block; text-align:center; font-size: 13px; padding: 10px 20px; }
    .colour-1 {background:pink; }
    .colour-2 {background: lightblue;}

    @media all and (max-width: 992px) {
        .content {width: 100%; background: #f5f5f5; flex-direction: column; }
        .menu {flex: 0 0 auto;}
    }
</style>

<section class="content">
    <div class="information">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non....</p>
    </div>

    <aside class="menu">
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
        <div class="side-info colour-1">Menu Item </div>
        <div class="side-info colour-2">Menu Item </div>
    </aside>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...