浮動div要素の最後の列のためのセレクタ

Question

私はそれがこのようなことでしょうwidth: 25%; float: left;と12の要素があるとします。私はこれらのdivにoverflow: visible;と拡大するこれらのdivの各内側のdivを追加した

--------- 
|a|b|c|d| 
--------- 
|e|f|g|h| 
--------- 
|i|j|k|l| 
--------- 

ホバーオン。大丈夫です。問題は、d、h、lを除いて、すべてのdivの右に展開したいので、左に展開する必要があります。私はそれがJavaScriptなしでそれをすることが可能かどうか疑問に思います。 d、hおよびlを選択できるCSSセレクタはありますか（それは応答性があり、常に行ごとに4つのdivではないことに注意してください）。前記セレクタ。

Answer 1

フレックスボックスがあります。希望の出力を得るために、より良い値を選択してください。私が言ったように

ul{ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    align-content: space-around; 
 
} 
 
li{ 
 
    padding: 20px; 
 
    margin: 5px; 
 
    background-color: #8056ff; 
 
    color: white; 
 
    text-align: center; 
 
    flex-basis: 40px; 
 
    transition: flex-basis 1s; 
 
} 
 
li:hover{ 
 
    flex-basis: 100px; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
    <li>e</li> 
 
    <li>f</li> 
 
    <li>g</li> 
 
    <li>h</li> 
 
    <li>i</li> 
 
    <li>j</li> 
 
    <li>k</li> 
 
    <li>l</li> 
 
</ul>