分界 我是CSS新手，想知道如何在代码> div/之间设置一个边界，介于绿色和蓝色之间？

Html:

---

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

最简单的方法是使用

框大小：边框框将使边框成为元素框的一部分。因此，30%+70%加起来仍然等于100%。然而，这只是

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

看看这个

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

看

然后，还有一个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);
}

同样，您可以使用CSS表格布局。看看

由IE8+支持，跨浏览器

HTML:（非常简洁）

有一个属性叫做
border
，基本用法类似于
.class{border left:2px solid#ff00ff；}
。请注意，这会影响元素的大小。如果我将边框放在左边，就是这样：1px；它调整了所有内容的大小，并且这些div彼此不相邻。绿色div有左浮动和宽度30%，蓝色div有右浮动和宽度70%@Kimvais查看编辑历史，了解这个问题的更神秘和gimmetehcodez版本。@m90-框大小在IE8中确实有效-@Danield:我在写答案时看到了这一点，但现在编辑评论已经太晚了。。。。不管怎样，谢谢你的提示。但是他们不再肩并肩了。我添加了html和css以及第二张图片。也许我的css是sh**，因为我没有任何css的工作经验，但你必须有时间去学习！顺便说一句，Outline不应该用作边框替换。Upvote因为这是我唯一可以同意的解决方案——使用显示表hacks是笨拙的，Outline不用于添加边框。
.right {
  float: right;
  width: 70%;
  min-height: 550px;
  background: blue;
  outline: 1px solid #000;
}

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

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

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

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

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