石積みの具体的なレイアウト

Question

私はちょうど答えを検索するためにこの問題について考える方法を知らないと思う。

私は17ブロックをレイアウトするために石工を使用しています。ブロックは50％または25％のいずれかの幅です。

1 1 1 1 1

：その代わり、石工は自動的にこのような1行の25％広いdivを実行している

1 1 | | 1 1 1 |

：私の問題は、私はそれが次のようになりますので、4 1レイアウトを実現したいということです

私が欲しいものを達成するためのアドバイスは大歓迎です！

Answer 1

このHTMLを試してみてください

<div class="columns"> 
    <div class="column"> 
    1 
    </div> 
    <div class="column"> 
    1 
    </div> 
</div> 

<div class="columns"> 
    <div class="column" style="margin-left: auto;display: block"> 
    1 
    </div> 
</div> 

<div class="columns"> 
    <div class="column"> 
    1 
    </div> 
    <div class="column"> 
    1 
    </div> 
</div> 

CSS

.columns{ 
    width: 100%; 
} 
.column{ 
    height: 100px; 
    display: inline-block; 
    width: 25%; 
    background:red; 
    margin-top: 1em; 
} 

https://codepen.io/ClarkCalnia/pen/jwBEJw