Html 下推相邻Div的Div内容

我有三个相邻的等宽的div，我试图弄清楚为什么第一个div的内容，里面有一个额外的按钮，按下了另外两个div。这是一个显示问题吗？我宁愿在尝试手动顶部对齐它们之前了解原因。谢谢

这是我的标记：

<div id="events-cont">
        <div class="events-row">
          <div class="event-card">
              <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
              <div class="event-card-info">
              <h1>Event title</h1>
              <h2>Event date</h2>
              <h2>Event venue</h2>
              <p>
                Event description
                <a href="#">Learn More</a>
              </p>
              <a class="tickets-button" href="#">Buy Tickets</a>
            </div>
          </div>
          <div class="event-card">
              <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
              <div class="event-card-info">
              <h1>Event title</h1>
              <h2>Event date</h2>
              <h2>Event venue</h2>
              <p>
                Event description
                <a href="#">Learn More</a>
              </p>
            </div>
          </div>
          <div class="event-card">
              <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
              <div class="event-card-info">
              <h1>Event title</h1>
              <h2>Event date</h2>
              <h2>Event venue</h2>
              <p>
                Event description
                <a href="#">Learn More</a>
              </p>
            </div>
          </div>
        </div>
      </div>

---

演示：

因为

垂直对齐

的默认值是

基线

。这应该可以解决它

.event-card {
  ...
  vertical-align: top;
}

---

因为

垂直对齐

的默认值是

基线

。这应该可以解决它

.event-card {
  ...
  vertical-align: top;
}

---

您的

。事件卡是
内联块
，因此默认情况下它们与基线垂直对齐

使用
事件卡上的
垂直对齐：顶部
。类：

.event-card {
    vertical-align: top;
}

您的
。事件卡是
内联块
，因此默认情况下它们与基线垂直对齐

使用
事件卡上的
垂直对齐：顶部
。类：

.event-card {
    vertical-align: top;
}

我会让div浮动。更新CSS的此部分：

#events-cont .events-row .event-card {
    padding: 0 15px;
    display: inline-block;
    width: 33%;
    float: left; //added to stop the divs from being pushed down.
}

我会让潜水艇浮起来。更新CSS的此部分：

#events-cont .events-row .event-card {
    padding: 0 15px;
    display: inline-block;
    width: 33%;
    float: left; //added to stop the divs from being pushed down.
}