具有基于％的宽度和基于px的边框的浮动元素：避免换行的最佳方法是什么？

Question

我有一个问题，在我的睡眠中无情地恐吓我。如果你有一个可以达到的解决方案并且愿意分享它，请做;我想再度一次正常的睡眠。

在我的最新项目中，有多次我需要将4或5个元素彼此相邻浮动。每个元素的大小必须使用百分比（％），但也必须具有border-right: 1px solid #000。

曾几何时，我通常会使用百分比调整每个元素的大小，然后创建一个子元素，该子元素具有父级可能应具有的所有样式属性，包括border-right。但是，这种解决方案并不理想，因为它涉及大量不必要的标记。

然后，一位同事指示我另一个解决方案。如果元素的宽度使用％s调整大小，并且还需要border-right: 1px solid #000，则应用margin-right: -1px作为偏移量。虽然它有效，但它为我创造了另一个问题（这就是为什么我们在这里，在一起，联合）。

当在任何主要浏览器（ctrl mousescroll，ctrl - ）中缩小时，作为讨论焦点的浮动元素往往会跳舞一下;最后一个元素在中断到下一行之间切换，然后再回弹。请参考下图：

应该解决这个问题的原因是因为项目的范围有可能为来自不同人口统计数据的人们提供服务（特别是那些可能需要滚动或向外滚动以使文本更大或更小的人） 。确实是一个非常广泛的项目。

如何达到上述示例中突出显示的目标？ 如何将4个或5个或更多（或更少）有边界的元素相互浮动，使用％s按比例调整大小，而不会破坏它们？

Answer 1

您可以使用实验box model CSS3声明来使边框偏离元素宽度，而不是添加它。这应该可以防止这个问题。 Quirksmode上有a nice write up。 IE8 / 9和当前版本的webkit，opera和ff支持它。

li {
   -webkit-box-sizing:  border-box;
   -moz-box-sizing:  border-box;
   box-sizing:  border-box;
}

Answer 2

这可能听起来很糟糕，但为什么不使用背景图片来创建边框呢？

.box_20_percent {
   width:20%;
   float:left;
   padding:0;
   background-image:url([one_pixel_colored_image]);
   background-repeat:repeat-y; 
   background-position:right
}

这应该使“边框”完全不在调整大小计算之外。

Answer 3

如果以ems而不是像素声明边框宽度和负边距，则没有包装/跳跃。我意识到这可能是一种冷酷的舒适，因为它会在某种程度上损害你的设计，但它确实有效！