Javascript 尝试添加垂直div和其他内容时被按下

我正在尝试在其他div之间添加垂直div处理程序。不管是什么原因，其他人都会被推倒。我不知道为什么

您可以查看上面的JSFIDLE和下面的代码

编辑。我需要的是让所有div彼此对齐，中间是handler div

CSS

---

我建议使用flexbox，而不是模仿桌子。使用flexbox修复了此问题：

。整列{
显示器：flex；
身高：100%；
宽度：100%；
浮动：继承；
}
.col容器{
宽度：25%；
填充：0；
}

我建议使用flexbox，而不是模仿表格。使用flexbox修复了此问题：

。整列{
显示器：flex；
身高：100%；
宽度：100%；
浮动：继承；
}
.col容器{
宽度：25%；
填充：0；
}

html，正文{
身高：100%；
}
.整列{
显示器：flex；
柔性流：行扭曲；
显示：表格；
身高：100%；
宽度：100%；
表格布局：相对；
浮动：继承；
}
.col容器{
弹性基准：20%
填充：0；
}
上校{
身高：100%；
宽度：100%；
}
汉德勒先生{
弹性基准：20%
背景色：黑色；
身高：100%；
宽度：10px；
}
.选择{
背景颜色：紫色；
}

JS-Bin
方案A
方案B
备选案文C
一区
你好
方案A
方案B
备选案文C
区域2
方案A
方案B
备选案文C
区域3
方案A
方案B
备选案文C
区域4

html，正文{
身高：100%；
}
.整列{
显示器：flex；
柔性流：行扭曲；
显示：表格；
身高：100%；
宽度：100%；
表格布局：相对；
浮动：继承；
}
.col容器{
弹性基准：20%
填充：0；
}
上校{
身高：100%；
宽度：100%；
}
汉德勒先生{
弹性基准：20%
背景色：黑色；
身高：100%；
宽度：10px；
}
.选择{
背景颜色：紫色；
}

JS-Bin
方案A
方案B
备选案文C
一区
你好
方案A
方案B
备选案文C
区域2
方案A
方案B
备选案文C
区域3
方案A
方案B
备选案文C
区域4

我刚刚编辑了主要帖子。我需要的是让所有的div彼此对齐，中间是handler div。你想让它们垂直对齐还是水平对齐？我刚刚编辑了主帖。我需要的是让所有的div彼此对齐，中间是handler div。你想让它们垂直对齐还是水平对齐？太棒了。这就解决了我的问题。为什么flex box更好？太好了！你能把它标为正确答案吗？Flexbox是一种更为现代的方法，适用于此类布局。学习它会在将来为你节省很多时间：）太棒了。这就解决了我的问题。为什么flex box更好？太好了！你能把它标为正确答案吗？Flexbox是一种更为现代的方法，适用于此类布局。学习它将在将来为您节省大量时间：）

html, body {
  height: 100%;


}

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