两列和一个页脚使用css分割的边界（单边）

Question

我想创建一个强大的css样式，它可以运行几乎所有的浏览器（包括IE7，firefox 3） ，它们显示两列和一个页脚除以点边境。 我试图执行下面的代码， ，但我有一个问题： 当我应用边界右风格：虚线;向左类 A和B不在同一水平面。 请halp我修复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

您遇到的问题是该元素的边框不包含在该元素的定义宽度内;所以元素是其父宽度的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和铬（FF5.x和12.x的铬在Ubuntu 11.04）使用方法：

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 2

固定

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

你有什么要记住的是，的％A边界数+分配。

所以说你有一个100像素宽（100％）的盒子，你把一个边框放在1px边框（1％）上，那实际上是101％。所以在你的情况下，它正在打破下一行的空间，因此给你错误。

在我的修复中，我只是将正确的容器设置为49％。这对流体解决方案来说很好，或者如果你有一个固定的布局，将其设置为固定值。

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

希望这会有所帮助！

Answer 3

问题是边框将宽度增加到div与.left。作为div出现的容器是固定宽度的，你可以简单地给固定宽度值太.left和.right元素（或减少其百分比宽度），使.left略窄：

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

这里是一个updated fiddle。我还建议您阅读box model以了解边界，填充等如何增加宽度。

Answer 4

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

50％和50％= 100％所以没有为边界的空间。

Answer 5

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 6

把你的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/

Answer 7

这是因为50% + 50% + 1px（the bord呃）高于100%。 如果你的.container不会改变宽度，你可以给它们一个固定的像素值。

但是，如果你.container会改变宽度的，你可以尝试添加单独包含边界，像这样的另一个元素：

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

不要忘了给.container一个position:relative;。

Answer 8

@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它不会影响任何东西&你也可以使用CSS3 box-sizing: border-box;但它不是由IE7

检查此琴http://jsfiddle.net/euYTQ/30/