我有一个问题,在我的睡眠中无情地恐吓我.如果你有一个可以达到的解决方案并且小心分享它,请做;我想再度一个正常的睡眠之夜.
在我的最新项目中,有多次我需要将4或5个元素相互浮动.每个元素的大小必须使用百分比(％),但也必须具有border-right：1px solid#000.
曾几何时,我通常会使用百分比调整每个元素的大小,然后创建一个子元素,该子元素具有父级可能应具有的所有样式属性,包括border-right.但是,这种解决方案并不理想,因为它涉及大量不必要的标记.
然后一位同事指导我另一个解决方案.当元素的宽度使用％s调整大小,并且还需要具有border-right：1px solid#000时,请应用margin-right：-1px作为偏移量.虽然它有效,但它为我创造了另一个问题(这就是为什么我们在这里,在一起,在联盟中).
当在任何主要浏览器(ctrl mousescroll,ctrl – )中缩小时,作为讨论焦点的浮动元素往往会跳舞一下;最后一个元素在中断到下一行之间切换,然后再回弹.请参考下图：
应该解决这个问题的原因是因为项目的范围有可能为来自许多不同人口统计的人们服务(特别是那些可能需要滚动或者向外滚动以使文本更大或更小的人).确实是一个非常广泛的项目.
如何达到上述示例中突出显示的目标？
如何将4个或5个或更多(或更少)边界元素相互浮动,使用％s按比例调整大小,而不打破形式？
解决方法
您可以使用实验性
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;
}
