砌體將具體佈局

Question

我懷疑我只是不知道如何考慮這個問題才能搜索答案。

我正在使用石工佈置17塊。這些街區寬度爲50％或25％。我的問題是，我想達到4 1的佈局，所以它看起來是這樣的：

1 1 | | 1 1 1 |

相反，砌體自動運行在一排中的25％寬的div像這樣：

1 1 1 1 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