html - html页面中的div顺序

Question

我已经编写了制作 3 个 div 的代码，但问题是我希望紫色 div(menu2 类)出现在绿色 div(menu1)旁边，但这出现在底部。感谢您的帮助。

html,
body {
  height: 100%;
}

.header {
  height: 10%;
  background-color: #FFCC00;
  text-align: center;
  font-size: 24px;
}

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

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

<div class="header">header</div>
<div class="menu1">menu1<br />
  <p>lorem ipsum </p><br />
  <p> dolor sit amet</p><br />
  <p> eirmod tempor invidunt </p><br />
</div>
<div class="menu2">menu2</div>

Answer 1

不要使用 float

Float 从来就不是用来创建布局的。它改变了订单流程。

使用现代网络标准示例:Flexbox 或 Grid。

使用 flex box 只需一行代码。首先，您必须将 menu1 和 menu2 放在父 div 中

示例:

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

然后把display : flex放到container类

示例:

.container{
    display:flex;
}

就这样，干净整洁。