为什么盒子在盒子里向下移动

Question

颜色用于定向。如果你像这样输入这个代码，左边应该有一个红色的大框，右边应该有一个子框。在红色的盒子里，左边有一个黄色的小盒子，下面右边有一个紫色的盒子。我想紫色的盒子和黄色的盒子一样高。

.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;
align-items: center;
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;
float: right;
}

<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>

Answer 1

如果在你的CSS for.left类中添加display flex或内容，你的黄色和紫色框将在同一行。

.left{
display: contents;
}

Answer 2

Servus ChooseOne！在代码中，您混合了一些内容。我稍微打扫了一下。

.centerbox {
display: flex;
width: 100%;
justify-content: space-between;
}
.left, .right {
height:30px;
}
.left {
width: 64%;
display: flex;
background-color: red;
justify-content: space-between;
}
.right {
width: 34%;
background-color: blue;
}
.megadiv {
max-width: 1200px;
margin: auto;
text-align: center;  
}
.insideleft {
width: 20%;
background-color: yellow;
}
.insideright {
width: 80%;
background-color: purple;  
}

<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
wadawd
</div>
<div class="insideright">
awdwad
</div>
</div>
<div class="right">
awdwaawd
</div>
</div>
</div>