将不相等的高度div对齐到顶部

Question

我正在创建一个包含不同高度项目的投资组合。每个项目都是inline-block div，宽度固定。所以，我每排有4件。我把它们垂直对齐到顶部，到目前为止它很好。问题从第2行开始。我需要将每个项目与其上部项目对齐，而不是行。 我想在我的样式代码中通过纯CSS来实现。希望不要使用插件，库或预制代码。请参阅图片以了解有关我的意思的更多信息。

我得到的代码如下。 HTML（PHP）：

<div class="portfolio">
    <?php foreach($portfolio as $work) : ?>
        <div class="work">
            <div class="work-image">
                <img src="images/<?php echo $work[0]; ?>" alt="<?php echo $work[1]; ?>">
                <h5 class="work-title"><?php echo $work[1]; ?></h5>
            </div>

            <div class="work-description">
                <?php echo $work[2]; ?>
            </div>
            <div class="work-tech">
                <h5><?php echo $lang['TECHNOLOGIES']; ?></h5>
                <ul>
                <?php foreach($work[4] as $tech) : ?>
                    <li class="tech-item"><span class="fa fa-check"></span> <?php echo $tech; ?></li>
                <?php endforeach; ?>
                </ul>
            </div>
        </div>
    <?php endforeach; ?>
</div>

CSS（由LESS提供）：

#portfolio {
    background: url('../images/portfolio-bg.jpg') repeat-y center top;
    background-attachment: fixed;
    .portfolio {
        text-align: center;
        .work {
            display: inline-block;
            width: 280px;
            margin: 5px;
            padding: 0;
            vertical-align: top;
            background: green;
            .work-image {
                position: relative;
                width: 100%;
                height: 186px;
                overflow: hidden;
                background: black;
                img {

                }
                .work-title {
                    position: absolute;
                    bottom: 10px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    color: red;
                }
            }
            .work-description {
                padding: 15px;
                font-size: 14px;
                text-align: justify;
            }
            .work-tech {
                padding: 15px;
                text-align: left;
                h5 {
                    margin-bottom: 10px;
                }
            }
        }
    }
}