Question

好的，这是我以前从未遇到过的问题。我想使用CSS来指定元素宽度应始终为10个像素间隔。因此，例如，如果元素的宽度为11，则它将被提升到20,56 =＆gt; 60,138 =＆gt; 140等...

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

div { width-interval: 10px; }

Answer 1

这个问题是除非另外指定，否则块级元素总是窗口的大小。指定更具体的宽度后，您不需要宽度inverval。

这两种情况会有所不同;

如果块级元素是收缩包装的（在浮点数和内联块的情况下）
如果元素具有相对宽度，即百分比。

但是如果你把它设置为相对的，你就不需要间隔，因为它应该是相对于页面上的其他东西，所以当其他东西必须调整以补偿时会变得复杂。例如，如果我有两个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>

希望它有所帮助。

css宽度间隔

2 个答案: