CSS3 border-spacing property won't take relative measurements
Here's the problem:
<html>
<head>
<style>
#container{
width:500px;
background-color:#ff0000;
border-collapse:separate;
border-spacing:20%;
}
#child{
display:table-cell;
background-color:#00ff00;
}
</style>
</head>
<body>
<div id="container">
<div id="child">
X
</div>
</div>
</body>
</html>
And as a jsfiddle.
The issue is that border-spacing doesn't want to take a percentage a开发者_StackOverflows a valid argument (try changing the border spacing to a px amount to see what it's supposed to do). Why not? Is there a way I can get stretchy/squishy border spacing? The context is an obviously more involved project where most of the other measurements are defined relatively, so having this one absolute measurement means that the boxes don't stay aligned when the window changes shape.
I know I could make everything absolute, but I want things to stretch/squish as appropriate.
as w3 specification inform us, it takes length values (such as px, em, etc.) and not percentage. More information http://www.w3.org/TR/CSS2/tables.html#propdef-border-spacing
More information about length: http://www.w3.org/TR/CSS2/syndata.html#value-def-length
More information about percentage units: http://www.w3.org/TR/CSS2/syndata.html#percentage-units
As stated in Sotiris' answer, percentages do not work. But you could via javascript or jquery (done inside of a function that is called on "onresize") change the border-spacing value which could become a relative value in your math.
加载中,请稍侯......
精彩评论