如何在CSS中制作两个等高的浮动div并用分隔线？

使用 CSS 制作等高浮动 Div

问题： 创建两个共享相同高度且具有相同高度的浮动 div它们之间的分隔线，不使用表格进行语义

解决方案： 要实现此目的，您可以采用以下 CSS 技术：

#container {
  overflow: hidden;
  width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

说明：

• 将 div 包装在带有溢出的容器中：隐藏会强制由浮动 div 引起的换行在容器内。
• 对 div 应用较大的底部填充和等量的负边距，可确保它们扩展至占据 100% 的高度，同时仍使其内容垂直居中。
• 分隔 div 的线是使用应用于其中一个的小边距或边框创建的。

通过利用这种 CSS 技术，您可以创建两个等高浮动 div 没有使用表格的语义含义。

以上是如何在CSS中制作两个等高的浮动div并用分隔线？的详细内容。更多信息请关注PHP中文网其他相关文章！