html页面中div的顺序

我已经编写了这段代码来制作3个div，但问题是我希望紫色div（menu2类）出现在绿色div（menu1）的旁边，但它出现在底部。谢谢你的帮助

html，
身体{
身高：100%；
}
.标题{
身高：10%；
背景色：#FFCC00；
文本对齐：居中；
字体大小：24px；
}
menu1先生{
宽度：30%；
身高：100%；
背景色：#CCFF33；
文本对齐：居中；
显示：块；
}
梅努2先生{
宽度：70%；
身高：100%；
背景色：#FF99FF；
文本对齐：居中；
显示：块；
}

标题
菜单1

lorem ipsum


多洛·希特·阿梅特


eirmod临时受邀人


menu2

最简单的方法是在两个菜单上都添加以下内容：

html，正文{
身高：100%；
}
.标题
{
身高：10%；
背景色：#FFCC00；
文本对齐：居中；
字体大小：24px；
}
menu1先生
{
浮动：左；/*添加此行*/
宽度：30%；
身高：100%；
背景色：#CCFF33；
文本对齐：居中；
显示：块；
}
梅努2先生
{
浮动：左；/*添加此行*/
宽度：70%；
身高：100%；
背景色：#FF99FF；
文本对齐：居中；
显示：块；
}

标题
菜单1

lorem ipsum


多洛·希特·阿梅特


eirmod临时受邀人


menu2

一个好方法是将这两个组件包装到flexbox中。FlexBox非常好，因为它们消除了使用其他方法（如使用

display:inline block

）时会出现的空白问题

下面是一个例子：

منوکنای

soft98.ir


softgozar.com


bmi.ir


منوی اصلی 

容器的CSS：

.container{
显示器：flex；
}

在menu1和menu2类中使用

float:left

.menu1
{
width:30%;
height:100%;
background-color:#CCFF33;
text-align:center;
display:block;
float:left;
}
.menu2
{
width:70%;
height:100%;
background-color:#FF99FF;
text-align:center;
display:block;
float:left;
}

---

不要使用浮动

浮动从来不是用来创建布局的。它改变了秩序的流动

使用现代web标准示例：Flexbox或Grid

对于flex box，它只是一行代码。 首先，您必须将menu1和menu2放在父div中

例如：

<div className="container">
    <div className="menu-1"></div>
    <div className="menu-2"></div>
</div>

---

你有不同的选择，要么

float:left

要么

display:inline block

要么

flexbox

layout。一个div带左浮动，另一个右浮动。非常感谢。

.container{
    display:flex;
}