html - CSS div不分开

我在将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的排列方式不正确。他们有点像互相奔跑。

最佳答案

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

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


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


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


Aligning Three Divs Horizontally Using Flexbox


另外，在使用浮点数时，熟悉clearfix方法也有帮助：


What is a clearfix?
What methods of ‘clearfix’ can I use?
Clearing Floats: An Overview of Different clearfix Methods

关于html - CSS div不分开，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38707482/