使用css将两列和一个页脚按边框（各个边）划分

我想创建一个健壮的css样式，几乎所有浏览器都包括IE7、Firefox3 这显示了两列和一个被虚线分隔的页脚。 我试图实现以下代码， 但我有一个问题： 当我应用右边框样式时：虚线；离开教室 A和B不在同一水平面上。 请暂停我来修复css样式

HTML

固定的

您需要记住的是，一个边框占分配的百分比的+

假设你有一个100像素宽100%的盒子，你把一边加上1像素的边框，实际上是101%。所以在你的例子中，它被打断到了下一行空间，因此给了你错误

在我的修正中，我只是将正确的容器设置为49%。这对于流体解决方案非常有用，或者如果您有固定的布局，请将其设置为固定值

记住，填充也是一样的。。。它将计算指定大小或百分比的+数

希望这有帮助

固定

您需要记住的是，一个边框占分配的百分比的+

假设你有一个100像素宽100%的盒子，你把一边加上1像素的边框，实际上是101%。所以在你的例子中，它被打断到了下一行空间，因此给了你错误

在我的修正中，我只是将正确的容器设置为49%。这对于流体解决方案非常有用，或者如果您有固定的布局，请将其设置为固定值

记住，填充也是一样的。。。它将计算指定大小或百分比的+数

---

希望这有帮助

问题是边框用.left增加了div的宽度。由于container div看起来是固定宽度的，您可以简单地将.left和.right元素的宽度值也设置为固定宽度，或者减少它们的百分比宽度，并使.left稍微窄一些：

.left{
    background:#ddd;
    float: left;
    width: 372px;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 375px;
}

---

这是一个例子。我还建议阅读上的，了解边框、填充等如何增加宽度。

问题是边框使用.left为div增加宽度。由于container div看起来是固定宽度的，您可以简单地将.left和.right元素的宽度值也设置为固定宽度，或者减少它们的百分比宽度，并使.left稍微窄一些：

.left{
    background:#ddd;
    float: left;
    width: 372px;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 375px;
}

这是一个例子。我还建议大家仔细阅读，了解一下边框、填充物等是如何增加宽度的

50%和50%=100%，因此没有边界空间

---

50%和50%=100%，因此边界没有空间。

您遇到的问题是元素的边界未包含在该元素的定义宽度内；因此，该元素的宽度为其父元素宽度的50%，但边界会增加一个额外的宽度

例如，如果将元素的宽度减小到48%，则它似乎可以按照您的意愿工作：

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 48%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 48%;
}

通过更新进行编辑

对于Firefox和Chromium FF5.x以及Ubuntu 11.04上的Chromium 12.x，您可以使用：

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */
}

---

它将边框宽度合并到元素的宽度中；通过这种方法，您可以保留宽度：50%；在元素和边界上进行排序。不幸的是，它不适用于Opera，或者可能不适用于IE。

您遇到的问题是元素的边界不包含在该元素的定义宽度内；因此，该元素的宽度为其父元素宽度的50%，但边界会增加一个额外的宽度

例如，如果将元素的宽度减小到48%，则它似乎可以按照您的意愿工作：

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 48%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    float: right;
    width: 48%;
}

通过更新进行编辑

对于Firefox和Chromium FF5.x以及Ubuntu 11.04上的Chromium 12.x，您可以使用：

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */
}

---

它将边框宽度合并到元素的宽度中；通过这种方法，您可以保留宽度：50%；在元素和边界上进行排序。不幸的是，它在Opera上不起作用，或者可能在IE上不起作用。

A和B处于不同级别的原因是它们不适合一个宽度。您可以用宽度：50%声明它们，但其中一个也有边框。边框宽度被添加到div的宽度中-因此两个div加上边框不适合水平间距

例如，试着把宽度：49%放在每一个上面，你会看到不同。这并不理想，因为您并不总是知道视口的宽度。如果你能使用精确的像素宽度，那就容易多了。尝试此CSS进行更改：

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
} 
.left{
    background:#ddd;
    float: left;
    width: 374px;
    border-right:dotted 2px black;
}
.right {
    background:#eee;
    float: right;
    width: 374px;
}
.footer {
    background: none repeat scroll 0 0 #eef;
    clear: both;
    border-top-style:dotted;
}

---

A和B处于不同水平的原因是它们不能适应同一宽度。您可以用宽度：50%声明它们，但其中一个也有边框。边框宽度被添加到div的宽度中-因此两个div加上边框不适合水平间距

例如，试着把宽度：49%放在每一个上面，你会看到不同。这并不理想，因为您并不总是知道视口的宽度。如果你能使用精确的像素宽度，那就容易多了。尝试此CSS进行更改：< /p>

---

把你的右手放到左手

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

---

示例：

将您的div向右放入div向左

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

示例：

这是因为50%+50%+1pX边界高于100%。 如果你的.container不打算改变宽度，你可以给他们两个一个固定的像素值

但是，如果.container要更改宽度，可以尝试添加另一个单独包含边框的元素，如下所示：

.border {
    height:100%;
    width:0;
    border-left:3px dotted #000;
    position:absolute;
    left:50%;
    top:0;
}

别忘了给.container一个位置：relative

这是因为50%+50%+1pX边界高于100%。 如果你的.container不打算改变宽度，你可以给他们两个一个固定的像素值

但是，如果.container要更改宽度，可以尝试添加另一个单独包含边框的元素，如下所示：

.border {
    height:100%;
    width:0;
    border-left:3px dotted #000;
    position:absolute;
    left:50%;
    top:0;
}

别忘了给.container一个位置：relative

安托伊斯；padding&border如果元素以百分比的形式出现问题，则为元素添加宽度。所以可以为这样的对象指定宽度：

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
}
.left{
    background:#ddd;
    float: left;
    width: 50%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    overflow:hidden;
}

现在进入。如果你给边框和填充，它不会产生任何影响&你也可以使用css3框大小：border-box；但是IE7不支持它

检查这把小提琴

@Antojs；padding&border如果元素以百分比的形式出现问题，则为元素添加宽度。所以可以为这样的对象指定宽度：

div.container {
    background:#eee;
    margin: 0 auto;
    width: 750px;
}
.left{
    background:#ddd;
    float: left;
    width: 50%;
    border-right-style:dotted;
}
.right {
    background:#eee;
    overflow:hidden;
}

现在进入。如果你给边框和填充，它不会产生任何影响&你也可以使用css3框大小：border-box；但是IE7不支持它

---

检查这把小提琴

我不会说这是AntonJs想要的，因为他们使用的是%非固定单位measurement@Alistair-由于集装箱舱的宽度是固定的，我认为这是可以接受的。我还提到了他可以简单地降低百分比宽度的事实。对不起，你说得对，容器的宽度是固定的，你提到了百分比。[漫长的一周]我不会说这是AntonJs想要的，因为他们使用的是%而不是固定单位measurement@Alistair-由于集装箱舱的宽度是固定的，我认为这是可以接受的。我还提到了他可以简单地降低百分比宽度的事实。对不起，你说得对，容器的宽度是固定的，你提到了百分比。[这是漫长的一周]