Question

根据另一个answer中的question，我尝试为放置在外部的div中添加一个行边框。

然而，这导致div为mess up为什么？

标记

<div id="outer">
        <div id="chart"></div>
        <div id="table"></div>
</div>

CSS

#outer{

width: 1300px; 
height: 640px;
border: 1px solid black;
}

#chart{

  float:left;
  width: 900px;
  height: 100%;
  left:0;
  background-color: red;
}

#table{

  float:right;
  width: 400px;
  height: 100%;
  right:400;
  background-color: yellow;
  border: 1px solid back;

}

Answer 1

这是因为盒子模型...盒子模型认为内容的尺寸是CSS中由高度和宽度定义的尺寸。

现在你把高度：100％用于内容..添加的任何边框都会添加到那个..

解决方案是通过以下方式覆盖元素的盒子模型计算：

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

这样，高度和宽度将包括填充和边框

Answer 2

400px + 2个边框= 402px。 402px + 900px = 1302px这对于你的1300px容器来说太宽了，所以浮子下降了。

最简单的解决方法是用大纲替换边框：

outline : 1px solid black;

Answer 3

在css中使用此属性：

box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */

通过这种方式，您可以定义某些元素以适合某个区域。

更多信息：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 4

border和padding都会添加到width和height元素。减少height和width以保持相同的总尺寸。

为什么在css中添加线条边缘会弄乱其正确的位移？

4 个答案: