css - css宽度间隔

Question

好的，这是我以前从未遇到过的问题。我想使用 CSS 来指定元素宽度应始终以 10 像素为间隔。因此，例如，如果一个元素的宽度为 11，它会增加到 20、56 => 60、138 => 140 等...

我怀疑CSS有办法做到这一点，但我想我还是会问。像这样的东西会很好：

div { width-interval: 10px; }

Answer 1

这样做的问题是块级元素始终是窗口的大小，除非您另外指定。一旦你指定了一个更具体的宽度，你就不需要一个宽度反转。

这将是不同的两种情况是；

1. 如果块级元素被收缩包装（在浮动和内联块的情况下）

2. 如果元素具有相对宽度，即百分比。

但是，如果您将其设置为相对，则不需要间隔，因为它应该与页面上的其他内容相关，因此当必须调整其他内容以进行补偿时，这会变得复杂。例如，如果我有两个 div：

<div id="one"></div>
<div id="two"></div>

和一条规则：

#one {
width: 50%;
width-interval: 25px;
}

#two {
width: 50%;
width-interval: 27px;
}

哪一个赢了？如果它对排列图片或文字很重要，您可能不希望其中一个胜过另一个，但它不能同时忽略两者。

我认为这个想法很好，但可能会更好地由 javascript 处理，因为您要求它既是动态的，又是基于“最近”间隔的。这可以工作：

$(function () {

$(div).each(function() {
    var cur_width = $(this).width();
    var inverval_diff = cur_width % 10;
    $(this).width(cur_width + inverval_diff);
});

});

以上是在 jquery 中，以防你不使用它作为你的 js 框架。

Answer 2

css 没有这样的属性，但是您可以使用其他 JavaScript 设置元素的宽度，例如：

<script type="text/javascript">
$(function(){
    var widthInterval = 20;
    $('div').each(function(){
        var $this = $(this);
        var divisions = parseInt($this.width() / widthInterval) + 1;
        var resWidth = (divisions * widthInterval) + "px";
        $this.css('width', resWidth);
        console.log("Resulted width: " + resWidth);
    });
});    
</script>

希望能帮助到你。