flexbox 表，所有 div 对齐但一个，边框不匹配，不知道为啥

Posted 2023-03-06

【中文标题】flexbox 表，所有 div 对齐但一个，边框不匹配，不知道为啥

【英文标题】：flexbox table, all divs aligned but one, the borders don't match, don't know whyflexbox 表，所有 div 对齐但一个，边框不匹配，不知道为什么

【发布时间】：2018-10-07 06:01:48

【问题描述】：

我正在使用 flexbox 做这个表格，每个边框都匹配，但是正如你在小提琴中看到的，第二个表格，带有文本的单元格：RIGHT SIDE NOT ALIGNED 的边框与边框的边框不完全对齐下一行！

https://jsfiddle.net/buwgq14a/39/

什么都试过了，发疯了，有什么解决办法吗？我做了与上表完全相同的事情，它在那里没有问题，不知道两张表之间有什么变化..

谢谢

【问题讨论】：

请问您为什么不使用<table>？

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。

Paulie_D 好的，很抱歉，但在这种情况下，代码这么长，我应该把什么剪掉？

我没有使用表格，因为我发现使用 flexbox 可以让您进行更多的自定义，或者至少，我已经习惯了！

【参考方案1】：

问题是当你将宽度设为 10% 并为 div 指定 1 px 时，宽度等于 10% + 1px。

您可以赋予 box-sizing 属性，使宽度始终保持 10%，

在你的类代码中，添加 box sizing 属性

  .epMachinesContentCells2
    box-sizing: border-box;
  

【讨论】：

谢谢你的回答，我对此很担心，但我已经得到了'box-sizing:border-box;'带引导程序！无论如何尝试将其直接添加到该类，但没有任何改变！

即使我删除了 1px 边框，也就是简单地划分 2 个 div，没有任何变化，边框仍然与上面的行不匹配