html页面中的div顺序答案

【问题标题】：Order of Divs in html pagehtml页面中的div顺序
【发布时间】：2019-11-17 14:20:56
【问题描述】：

我已经编写了这段代码来制作 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>

【问题讨论】：

您有不同的选择，float:left 或 display:inline-block 或 flexbox 布局。

标签： html css

【解决方案1】：

不要使用浮点数

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;
}

你有它，又好又干净。

【讨论】：

【解决方案2】：

在 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;
}

【讨论】：

【解决方案3】：

最简单的是，您只需在两个菜单上添加float:left;，例如：

html, body{
    height: 100%;
}
.header
{

  height:10%;
  background-color:#FFCC00;
  text-align:center;
  font-size:24px;
}
.menu1
{
float:left; /* add this line */
width:30%;
height:100%;
background-color:#CCFF33;
text-align:center;
display:block;
}
.menu2
{
float:left;  /* add this line */
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>

【讨论】：

一个 div 向左浮动，另一个向右浮动。谢谢。

【解决方案4】：

这样做的一个好方法是将这两个组件包装到一个弹性盒中。 Flexbox 很棒，因为它们消除了使用其他方法（例如使用 display: inline-block）时会遇到的空白空间问题。

这是一个例子：

<div class="container">
  <div class="menu1">
  منو کناری <br />
  <p> soft98.ir </p><br />
  <p> softgozar.com </p><br />
  <p> bmi.ir </p><br />
  </div>
  <div class="menu2">منوی اصلی </div>
</div>

容器的 CSS：

.container {
  display: flex;
}

【讨论】：