css - CSS相对大小列不等宽问题

Question

我正在尝试基于 oocss 框架实现相对宽度列。为了在列之间添加一个装订线，我在列及其内容之间添加了一个内部 div。

问题是我最终得到宽度不等的列......

我可以通过对第一列和最后一列使用相同的填充来避免这种情况，但是由于我想嵌套列，它会在左右两侧创建一个移位......

这是一个小提琴：

http://jsfiddle.net/WxPSm/2/

欢迎任何想法！

谢谢

Answer 1

.unit > .content:first-child {
padding: 0 2em;

}

问题在于您的内部 .content div。中间列的两侧都应用了填充，因为左列仅在右侧具有填充，而右列仅在左侧具有填充。

外部单元 div 的大小都相同。如果您需要视觉效果，使用萤火虫检查元素可以很好地突出显示填充。