顏色用于定向。如果你像這樣輸入這個代碼，左邊應該有一個紅色的大框，右邊應該有一個藍色的大框。在紅色方框中，左邊有一個黃色的小方框，右邊有一個紫色的方框。我希望紫色盒子與黃色盒子的高度相同。
.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>uj5u.com熱心網友回復：
如果您在 .left 類的 CSS 中添加 display flex 或內容，您的黃色和紫色框將位于同一行。
.left{
display: contents;
}
uj5u.com熱心網友回復：
服務選擇一個！在您的代碼中，您混合了一些東西。我稍微清理一下。
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447909.html