css - div之间的边界

Question

我是 CSS 新手，想知道div在这种情况下如何在绿色和蓝色中间放置 s 之间的边框？

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%。然而，这只是部分支持。

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

看这个小提琴。

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

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

看另一个小提琴

然后，还有 calc（不太受支持），它可以让您从百分比值中减去一个像素：

.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);
}

又是小提琴

Answer 2

您可以使用 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;
}

Answer 3

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

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