Html CSS div'；他们没有分开

我有一个问题，调整我的分区并排

下面是一张图片，它应该是什么样子的：

这是主体结构的代码：

<div id="AttackDiv">
    <div id="ImageDiv">
    </div>
    <div id="ContentDiv">
    </div>
    <div id="SkillDiv">
    </div>
</div>

显示如下：

问题是当我试图添加那些你可以在上面的图片中看到的黑匣子时。下面是它的外观：

如果我去掉白色背景色，你会发现Div没有正确对齐。他们有点像是在互相磨合

---

将右侧的物品放入自己的div容器中，然后将其浮到右侧

如果我没弄错的话，应该是这样的：

HTML

---

您可以在这里查看它：

将右侧的内容放入自己的div容器中，然后将其浮到右侧

如果我没弄错的话，应该是这样的：

HTML

---

您可以在这里查看：

默认情况下，div是块元素，在正常流中，它们占据容器的100%宽度。因此，div元素自然会垂直堆叠形成一列

让它们并排排列考虑这些选项：

• 将

  float:left

  应用于要在一行中显示的所有div
• 将div定义为

  display:inlineblock

或者，对于一个非常简单高效的解决方案，只需使用flexbox：

此外，在使用浮动时，熟悉clearfix的方法有助于：

---

默认情况下，div是块元素，在正常流程中，它们占据其容器的100%宽度。因此，div元素自然会垂直堆叠形成一列

让它们并排排列考虑这些选项：

• 将

  float:left

  应用于要在一行中显示的所有div
• 将div定义为

  display:inlineblock

或者，对于一个非常简单高效的解决方案，只需使用flexbox：

此外，在使用浮动时，熟悉clearfix的方法有助于：

#ImageDiv {
    height: 100%;
    width: 120px;
    float: left;
    background-color: white;
}

#ContentDiv {
    height: 60%;
    background-color: green;
}

#SkillDiv {
    height: 40%;
    background-color: blue;
}

<div id="AttackDiv">
    <div id="ImageDiv">left
    </div>
    <div id="RightSide">
      <div id="ContentDiv">right1
      </div>
      <div id="SkillDiv">right2
      </div>
    </div>
</div>

#ImageDiv {
    height: 100%;
    width: 120px;
    float: left;    
    background-color: white;
}

#ContentDiv {
    height: 60%;
    background-color: green;
}

#SkillDiv {
    height: 40%;
    background-color: blue;

}

#RightSide {
  float: right;
  width: 200px;
 }