Размещение двух сторонних блоков вокруг секции с помощью Flexbox - PullRequest
Новая
       23

Размещение двух сторонних блоков вокруг секции с помощью Flexbox

0 голосов
/ 21 июня 2019

Я пытаюсь создать основной div, содержащий section и два блока aside с каждой стороны.

Я написал следующий код:

HTML: 

<body>
    <div id="main"> <!-- "main" tag not supported in IE -->
        <section>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
        </section>
        <aside />
        <aside />
    </div>
</body>

CSS: 

body {
    width: 990px;
    margin: auto;
    background-color: grey;
    font-family: sans-serif;
}

#main {
    display: flex;
}

aside {
    flex: 1;
    height: 400px;
}

#main aside:nth-child(1) {
    order: 1;
    background-color: black;
}
#main aside:nth-child(2) {
    order: 3;
    background-color: green;
}

section {
    background-color: yellow;
    flex: 2;
    order: 2;
}

и я получаю это:

result

Почему два блока aside появляются (накладываются) справа от блока section?

Edit:

Я ожидаю что-то вроде этого: expected-result

1 Ответ

1 голос
/ 21 июня 2019

Необходимо внести два изменения. Во-первых, тег в стороне не является пустым тегом, а во-вторых, существует проблема с селектором pesudo css 

body {
    width: 990px;
    margin: auto;
    background-color: grey;
    font-family: sans-serif;
}

#main {
    display: flex;
}

aside {
    flex: 1;
    height: 400px;
}

#main aside:nth-child(2) {
    order: 1;
    background-color: red;
}
#main aside:nth-child(3) {
    order: 3;
    background-color: green;
}

section {
    background-color: yellow;
    flex: 2;
    order: 2;
}
<div id="main"> <!-- "main" tag not supported in IE -->
    <section>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </section>
    <aside></aside>
    <aside></aside>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...