为div添加边框看起来像一个表

Question

我需要创建两个列,看起来像一个具有漂亮的1px边框的表.边框杀死布局.有没有什么好方法如何在中间有一条线条有漂亮的边框？

.column-5 { width:50%; float:left; }
.border-light { border: 1px solid black; }

<div class="row">
  <div class="column-5 border-light">
	column 1
  </div>
  <div class="column-5 border-light">
	column 2
  </div>
</div>

http://jsfiddle.net/7zdLdmey/

Answer 1

添加边框"杀死"布局的原因是因为在计算宽度时(content-box默认情况下使用布局)不考虑边框宽度.两个容器的宽度总和为50%+ 50%+ 4px(4px 1xx边框),超过100%.这会导致第二个<div>元素换行到下一行.

这可以通过使用轻松解决box-sizing: border-box.此属性的作用是强制宽度计算包括元素上存在的任何边框大小,以便内部宽度加上边框大小加起来声明的宽度.

.column-5 {
  width: 50%;
  float: left;
  
  /* Force width to take into account border size */
  box-sizing: border-box;
}

.border-light {
  border: 1px solid black;
}

<div class="row">
  <div class="column-5 border-light">
    column 1
  </div>
  <div class="column-5 border-light">
    column 2
  </div>
</div>

下面的插图可帮助您了解box-sizing属性的三个不同可能值(源):

1. content-box (默认)不考虑填充和边框
2. padding-box 只考虑填充(不是你想要的)
3. border-box 考虑填充和边界

P/S:这些盒子上浆性能都没有考虑到利润,因为他们在技术上外面的框.