在两个嵌套的 div 之间插入垂直分隔线，而不是全高

Posted 2023-03-05

【中文标题】在两个嵌套的 div 之间插入垂直分隔线，而不是全高

【英文标题】：insert vertical divider line between two nested divs, not full height

【发布时间】：2011-07-18 22:02:15

【问题描述】：

如下图所示，我在浅蓝色框 div 中嵌套了向左浮动和向右浮动<div>。我不知道如何在它们之间插入一条垂直线，如下图所示：

具有以下属性：

1) 我可以控制或看起来合理的任一侧的填充/边距（即，与另一个 div 相比，它与一个 div 的距离不远）

2) 如图所示，在上方和下方留有边距，即不延伸浅蓝色 div 的整个垂直宽度

3) 随着浏览器窗口变大/变小以及蓝框大小随之增加/减小，动态维护 #1 和 #2

我正在寻找一个简单的，最好是纯 CSS 的解决方案。

相关CSS：

#left 
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;


#right 
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;


#blue_box 
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/

【参考方案1】：

想不出唯一的 css 解决方案，但您不能只在这 2 个之间设置一个 div 并在 css 中设置属性，使其看起来像图像中所示的一条线吗？如果您使用 div 作为表格单元格，这是一个非常简单的问题解决方案

【讨论】：

我一直在尝试在两者之间插入一个 div，但总是有问题.. 要么右侧 div 被推到左侧和中间 div 下方，要么白色两侧的边距线路不正常。

哎呀，要换行了。无论如何，这似乎应该相当简单，但事实并非如此，这让我觉得也许我做错了什么。

【参考方案2】：

试试这个。我将蓝色框设置为向右浮动，给左右一个固定的高度，并在左侧 div 的右侧添加了一个白色边框。还添加了圆角以更符合您的示例（这些不适用于 ie 8 或更少）。我也拿出了位置：相对。你不需要它。块级元素默认设置为相对位置。

在这里查看：http://jsfiddle.net/ZSgLJ/

#left 
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
  border-right: 1px solid white;
  height:400px;


#right 
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
  height:400px;


#blue_box 
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  float: right;

【讨论】：

谢谢，我会玩这个并回复你。我宁愿不设置固定高度。我确实有圆角的css，我只是想只列出与问题相关的代码。以后我应该用 jsfiddle 来解决问题，非常漂亮。

【参考方案3】：

使用 div 作为分隔符。无论左右 div 的高度是否相等，它总是垂直居中。您可以在您网站的任何地方重复使用它。

.divider
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;

在http://jsfiddle.net/gtKBs/查看工作示例

【讨论】：

完美！我离这个太近了，只是没想到要尝试绝对定位。谢谢！

这太棒了！如此干净和简单。