Question

http://jsfiddle.net/hw98P/

虽然这不是一个大问题，但我不知道为什么会发生这种行为。我有3个div设置为table-cells。我想要的是在填充填充之后，左侧col为20％，中间和右侧cols为40％。我将px填充更改为百分比，并在计算中分配了这个差异，但中间和右侧单元格的宽度不同。中间显示482px，右边显示508px。

我的问题是为什么会发生这种情况？是否可以使中间和右侧的cols完全相同的宽度？

  #content {
  padding:15px 0;
  display:table;
  width:100%;
  }

  #content #col1 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  width:19%;
  display:table-cell;
  }

  #content #col2 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  padding-left:1%;
  width:38%;
  display:table-cell;
  }

  #content #col3 {
  width:39%;
  padding-left:1%;
  display:table-cell;
  }

<div id="content">
  <div id="col1">1</div>
  <div id="col2">2</div>
  <div id="col3">3</div>
</div>

编辑：

我还尝试在table-layout: fixed;上设置#col1，但这不会改变任何内容。

Answer 1

这都是因为宽度计算。所以尝试使用box-sizing属性。像下面一样更新你的CSS。 More Information about box-sizing property

  #content {
  padding:15px 0;
  display:table;
  width:100%;
  }

  #content #col1 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  width:20%;
  display:table-cell;
  box-sizing:border-box;
  }

  #content #col2 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  padding-left:1%;
  width:40%;
  display:table-cell;
  box-sizing:border-box;
  }

  #content #col3 {
  width:40%;
  padding-left:1%;
  display:table-cell;
  box-sizing:border-box;
  }

FIDDLE DEMO

Answer 2

绝对可能。你可以使用calc（）CSS3函数来测量你的标准。

Example:

.style{
width:calc(50% - 10px);
}

示例说明：假设我的屏幕宽度分辨率为1000px，50％保持的值为500px。然后将该值从10px开始。最终值将为您提供490px的宽度。

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

的更多信息

如果您有任何问题或者这没有任何帮助，请发表评论或与我联系。

Answer 3

此处我使用box-sizing: border-box;并使用pseudo element所有的天赋宽度现在相等。查看 DEMO 。

#content {
  padding:15px 0;
    width: 100%;
    display: table;
    table-layout: fixed;
  }
#content div{   
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

  #content #col1 {
  display:table-cell;
  background:gold;
  position:relative;  
  }

#content #col2:after, #content #col3:before{
position: absolute;
content: " ";
top:0;
left:0;
display:block;
width: inherit;
}


  #content #col2 {
  display:table-cell;
  background:green;
  position:relative;
  }

  #content #col3 {
  display:table-cell;
  background:yellow;
  position:relative;   
  }

Answer 4

如果你想保留你的代码结构（我的意思是使用table / table-cell），这里采用相同的概念是更好的方法：http://jsfiddle.net/darcher/hw98P/23/

<强> BUT

首先，您可以在此处使用多个选项来实现所需。 position，table-cell，float和flexbox。我在fiddle demo中使用了所有四个。他们有不同程度的支持，因此请确保为您研究最佳选择（您可以查看caniuse.com）。 我推荐float，因为它的尝试和真实;但是，flexbox肯定会加快速度。

到您的OP

原因是可能使用每个单元格的不均匀填充以及％宽度和右边框。

免责声明：现在，诚然，我不确定display:table各种浏览器呈现的所有因素。

我非常倾向于相信你构建css的方式以及单元格如何继承填充，更具体地说就是它们渲染的顺序。

我没有确切的答案，但我确实有一个解决方案。你可以使用左边框重做它，像填充或一样，在声明像填充之后清除左/右最多填充。在开发基于布局的代码时，您应该尝试尽可能保持一致，从可扩展性到错误减少和兼容性等因素，这只是一种好的做法。您可以通过相对定位细胞来覆盖不同的填充结构，但是我没有看到额外标记或时间的原因，这是一个简单的解决方案，可以促进清洁，更好结构化方法。

1）请注意，对calc()：http://caniuse.com/calc的支持存在限制，您可以使用box-shadow:-1px 0 1px -1px #eee来避免1px border-width并避免使用calc()完全，但它也有其局限性：http://caniuse.com/box-shadow。

2）border-box需要加上前缀（甚至是静止的），以使其在Mozilla中的反应与在Chrome中的反应相同。使用此方法时，浏览器会为您计算元素宽度中的padding和border-width。如果您使用以下内容，则不会要求calc()或从填充中偏移宽度。 http://www.paulirish.com/2012/box-sizing-border-box-ftw/

我是如何做到的：如果我 HAD 使用display:table

*,*:before,*:after{/* 2 */
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box}

.content {
    display:table;
    padding:15px 0;
    width:100% }

div[class^=col] {
    display:table-cell;
    padding:0 15px }

.col1 { width:20%; } 
.col2, .col3{ 
    box-shadow:-1px 0 1px -1px grey; /* 1 */
    width:40% }

使用表格单元格的百分比相等宽度

4 个答案:

到您的OP