砌体将具体布局

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