html - 如何像图片中那样垂直对齐div

Question

我有这样的html代码

<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>
<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>
<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>
<div class="group">
<span class="big-letters"></span>
<a>links 1</a>
<a>links 2</a>
<a>links 3</a>
</div>

写完我的代码，加上额外的 css，我得到了这个输出

但这应该是预期的输出

任何人都知道如何仅使用 css 而不添加额外的 div 包装器来完成此操作。目的是使其可以轻松适应任何设备的屏幕。很想知道是否有其他方法可以做到这一点。

(如果这是重复的帖子，请立即通知我并给我其他类似帖子的链接我找不到这样的东西，因为我无法确定要使用的确切关键字。谢谢)

Answer 1

你可以这样做:

.box {
    width:60%;
    -webkit-column-count: 3;
    /* Chrome, Safari, Opera */
    -moz-column-count: 3;
    /* Firefox */
    column-count: 3;
}
.group {
    width:60%;
    display:inline-block;
    height:auto;
    background:#ededed;
    border:1px solid #ccc;
    margin:20px;
    padding:20px;
}
.group a {
    display:block;
    width:100%;
    margin:10px auto;
}
.big-letters {
    font-size:30px;
    color:#f60;
    display:block;
}

see fiddle

这样您就可以保持“蛇形”(向上-->再次向下和向上)顺序，而不是通常的 html float 从左到右