javascript - 尝试添加垂直 div 和其他内容被推下

Question

我正在尝试在其他 div 之间添加垂直 div 处理程序。无论出于何种原因，其他 div 都会被压低。我不知道为什么。

https://jsfiddle.net/paralaxwombat/dcog2pem/2/

你可以看看上面的jsfiddle和下面的代码。

编辑。我需要的是让所有 div 彼此对齐，处理程序 div 位于其间。

CSS

html, body {
  height: 100%;


}

.entire-col{
   display:table;
   height: 100%;
   width:100%;
   table-layout:relative;
   float: inherit;
}

Answer 1

我建议为此使用 flexbox 而不是模仿表格。使用 flexbox 修复它:https://jsfiddle.net/gm2c5v8u/

.entire-col {
    display: flex;
    height: 100%;
    width:100%;
    float: inherit;
}

.col-container {
    width: 25%;
    padding: 0 0 0 0;
}