gpt4 book ai didi

html - 使用 Flexbox 在一个部分周围放置两个 aside block

转载 作者:太空宇宙 更新时间:2023-11-04 06:07:45 25 4
gpt4 key购买 nike

我正在尝试创建一个主 div,其中包含一个 section 和每边两个 aside block 。

我写了下面的代码:

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 block 出现(叠加)在section block 的右边?

编辑:

我期待这样的事情: expected-result

最佳答案

需要进行两项更改。首先 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>

关于html - 使用 Flexbox 在一个部分周围放置两个 aside block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56698523/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com