div之间的边界

Question

我是CSS的新手，想知道如何在绿色和蓝色之间的中间位置div之间设置边框？

HTML：

<div class="wrap">
<div class="left">

</div>
<div class="right">

</div>

CSS：

.wrap {
  background: gray;
  overflow: hidden;
  width: 1024px;
   min-height: 400px;
  position: relative;
  margin: auto;
}

.right {
  float: right;
  width: 70%;
  min-height: 550px;
  background: blue;
  position: relative;
  border-left: 1px solid;
}

.left {
  float: left;
  width: 30%;
  min-height: 550px;
  background: green;
  margin: auto;
  border-right: 1px solid;
}

Answer 1

有几种方法可以解决这个问题：

最简单的方法是使用box-sizing: border-box;，这将使边框成为元素框的一部分。因此，30％+ 70％仍然可以达到100％。但是，这只是 partially supported 。

.right, .left{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

请参阅此a fiddle。

您可以使用的另一种方法是使用绝对定位而不是浮动（因此导致从文档流中取出的元素的简单重叠）：

.right, .left{
  float: none;
  position: absolute; //make sure the parent element has relative positioning here
}
.right{
  right: 0;
}
.left{
  left: 0;
}

请参阅another fiddle

然后，还有calc（也不是well supported），可让你从百分比值中减去一个像素：

.left{
   width: -webkit-calc(30% - 1px);
   width: -moz-calc(30% - 1px);
   width: calc(30% - 1px);
}
.right{
  width: -webkit-calc(70% - 1px);
  width: -moz-calc(70% - 1px);
  width: calc(70% - 1px);
}

再次，a fiddle

Answer 2

.right {
  float: right;
  width: 70%;
  min-height: 550px;
  background: blue;
  outline: 1px solid #000;
}

.left {
  float: left;
  width: 30%;
  min-height: 550px;
  background: green;
}

Answer 3

您可以使用CSS表格布局。看看 Working Fiddle

支持IE8 +，跨浏览器。

HTML：（非常简洁）

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS：（易于维护和跨浏览器）

.wrap {
    background-color: gray;
    width: 1024px;
    min-height: 400px;
    display: table;
    border-collapse: collapse;
}
.left, .right
{
    display: table-cell;
    min-height: 550px;
}
.right {

    width: 70%;
    background-color: blue;
    border-left: 1px solid black;
}
.left {
    width: 30%;
    background-color: green;
    border-right: 1px solid black;
}