27

<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*/
}
4

3 回答 3

57

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

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

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

于 2011-03-19T22:04:13.007 回答
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;
}
于 2011-03-19T21:57:58.800 回答
0

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

于 2011-03-19T21:55:34.673 回答