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

Question

1） 我有两个div，放在一个大div（容器为他们）。它们应该像是带有信息的小卡片。在这里，我有一个问题。当我有2张卡片彼此相邻而且一张卡片只是更高时，第二张卡片就像它与第一张卡片的底部对齐一样移动，但是我想让它在顶部对齐（这里是一个代码和小提琴）。

    <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

添加vertical-align：top;到.card

Answer 2

<强> 1） 将其添加到卡片的CSS中：

      vertical-align: top;

2）将div设为inline-blocks会强制它们位于相同的“行”上，就像它们是巨大的文本字符一样。尝试将较小的卡片装在自己的容器中。

Answer 3

您的解决方案：

1. [link](https://jsfiddle.net/Atula/4px7kc4v/3/)

2. [link](https://jsfiddle.net/Atula/sx7ryv70/1/)

Answer 4

此处查看此JSfiddle

HTML

    .main-cards {

      position: relative;

      height: auto;

      width: 80%;

      margin-left: auto;

      margin-right: auto;

      top: 50px;

      text-align: center;

      background-color: #6ab5dd;

      padding: 30px;

    }

    .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);

    }

CSS

{{1}}

你需要记住的是浮动原则。