html - 将 div 在顶部对齐，同时它们也在左侧对齐

Question

1) 我有 2 个 div，放在 1 个大 div(它们的容器)中。它们应该像带有信息的小卡片。在这里，我有一个问题。当我有两张相邻的卡片并且一张卡片更高时，第二张卡片移动就像它与第一张卡片的底部对齐，但我想让它始终对齐在顶部(这里是代码和 fiddle )。

    <div class="main-cards">
        <div class="card" style="width: 65%;">
            <h1>CARD 1</h1>
            <p>small</p>
            <p>small</p>
            <p>small</p>
        </div>
        <div class="card" style="width: 25%;">
            <h1>CARD 2</h1>
            <p>small</p>
        </div>
    </div>


    .main-cards{
        position: relative;
        height: auto;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        top: 150px;
        text-align:center;
        background-color: #6ab5dd;
    }
    .card{
        display: inline-block;
        background-color: white;
        height: auto;
        margin: 10px;
        margin-top: 40px;
        padding: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

fiddle :https://jsfiddle.net/4px7kc4v/2/

我想要它:

2) 我怎么能把 3 张卡片垂直居中放在一个大容器中居中，但在这种布局中？ (看img)

因为我有这个问题:https://jsfiddle.net/sx7ryv70/

感谢大家的宝贵时间!祝你有美好的一天!

Answer 1

1) 将此添加到卡片的 css:

      vertical-align: top;

2) 将 div 作为 inline-blocks 强制它们位于同一“行”，就好像它们是巨大的文本字符一样。尝试将较小的卡片放在各自的容器中。