css - CSS 幅の間隔

Question

わかりました、これまでに遭遇したことのない問題があります。CSS を使用して、要素の幅が常に 10 ピクセル間隔であることを指定したいと思います。たとえば、要素の幅が 11 の場合、20、56 => 60、138 => 140 などに増加します。

CSSにこれを行う方法があるとは思えませんが、とにかく尋ねたいと思いました. このようなものがいいでしょう：

div { width-interval: 10px; }

Answer 1

これに伴う問題は、特に指定しない限り、ブロックレベルの要素が常にウィンドウのサイズになることです。より具体的な幅を指定すると、幅の反転は必要ありません。

これが異なる2つのケースは次のとおりです。

1. ブロックレベルの要素がシュリンクラップされている場合（フロートおよびインラインブロックの場合）

2. 要素に相対的な幅、つまりパーセンテージがある場合。

ただし、相対的なものに設定している場合は、ページ上の他のものとの相対的なものであると想定されているため、間隔は必要ありません。他のものを調整して補正する必要がある場合は、複雑になります。たとえば、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);
});

});

上記は、jsフレームワークとして使用しない場合に備えて、jqueryにあります。

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>

それが役に立てば幸い。