Question

我正在尝试创建一个主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;
}

我明白了：

为什么两个aside块出现（重叠）在section块的右侧？

编辑：

我期望这样的事情：

Answer 1

需要进行两项更改。首先，aside标签不是空标签，其次，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>

使用Flexbox在部分周围放置两个备用块

1 个答案: