CSS div 没有分开答案

【问题标题】：CSS div's are not separatingCSS div 没有分开
【发布时间】：2016-12-29 17:32:31
【问题描述】：

我的 div 并排对齐时出现问题...

这是一张应该是什么样子的图片：

这是主要结构的代码：

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

“ImageDiv”是图片所在的位置。它占用120px。 “ContentDiv”是文本所在的位置，“SkillDiv”是其他 3 个黑框所在的位置。

这是我的 CSS：

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

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

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

显示这个：

问题是当我尝试添加您可以在图像上方看到的那些黑框时。这是它的外观：

如果我删除白色背景颜色，您会发现 Div 没有正确对齐。他们有点像在彼此奔跑。

【问题讨论】：

标签： html css

【解决方案1】：

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

要使它们并排对齐，请考虑以下选项：

将float: left 应用到要连续显示的所有div
将 div 定义为display: inline-block

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

Aligning Three Divs Horizontally Using Flexbox

此外，在使用浮点数时，熟悉 clearfix 方法会有所帮助：

【讨论】：

【解决方案2】：

把右边的东西放到自己的div容器里，然后浮动到右边。

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

HTML

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

CSS

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

你可以看这里：https://jsfiddle.net/mxcqyjos/4/

【讨论】：