Question

我想创建一个强大的CSS样式，几乎适用于所有浏览器（包括IE7，firefox 3）这显示了两个列和一个页脚划分为虚线边框。我试图实现以下代码，但我有一个问题：当我应用border-right-style时：点缀;离开课堂 A和B不在同一水平面上。请停下来修复css样式。

Click here for the current example

HTML

<div class="container">
  <div clas="left">A</div>
  <div class="right">B</div>
  <div class="footer">C</div>
</div>

CSS

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

Answer 1

固定

http://jsfiddle.net/euYTQ/19/

你必须记住的是，一个边界计算了所分配的％的数量。

所以说你有一个100px宽的盒子（100％），你把一边带1px边框（1％），实际上是101％。所以在你的情况下，它会突破到下一行空间，从而给你错误。

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

请记住，填充也是一样的...它将计算分配的大小或百分比。

希望这有帮助！

Answer 2

您遇到的问题是元素的边框不包含在该元素的定义宽度内;所以元素是父元素宽度的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%;
}

JS Fiddle demo

使用更新

编辑

对于Firefox和Chromium（Ubuntu 11.04上的FF5.x和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... */
}

JS Fiddle demo

将边框宽度合并到元素的宽度中;使用这种方法，您可以在元素上保留width: 50%;，边框将自行排序。不幸的是，它不适用于Opera，或者可能是IE。

Answer 3

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

例如，尝试将width: 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;
}

Answer 4

这是因为50% + 50% + 1px（边框）高于100%。如果您的.container不会改变宽度，则可以为它们提供固定的像素值。

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

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

不要忘记给.container position:relative;。

Answer 5

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

现在在.right，如果你给border & padding它不会影响任何事情＆amp;您也可以使用css3 box-sizing: border-box;但IE7不支持

检查这个小提琴http://jsfiddle.net/euYTQ/30/

Answer 6

问题是边框会使div为.left增加宽度。由于容器div似乎具有固定宽度，因此您可以简单地为.left和.right元素赋予固定宽度值（或减小其宽度百分比），并使{{1}稍窄一点：

.left

这是一个updated fiddle。我还建议您阅读box model以了解边框，填充等对宽度的影响。

Answer 7

http://jsfiddle.net/euYTQ/18/

50％和50％= 100％因此没有边框空间。

Answer 8

将你的div放在div左侧

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

并改变一点css

.left{
    background:#ddd;
    float: left;
    width: 50%;       
}
.right {
    background:#eee;
    float: right;
     border-left-style:dotted;  
}

示例：http://jsfiddle.net/euYTQ/28/

使用css将两列和一个页脚划分为Border（Individual sides）

8 个答案: