Question

我有三个相等宽度的相邻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>

CSS：

* {
  box-sizing: border-box;
}

#events-cont {
  padding: 30px 0;

  .events-row {
    .event-card {
      padding: 0 15px;
      display: inline-block;
      width: 33%;

      img {
        display: block;
        width: 100%;
      }

      .event-card-info {
        padding: 15px;
        min-height: 300px;
        text-align: left;
        background: #ededed;

        .tickets-button {
          display: inline-block;
          margin: 30px;
          padding: 10px 30px;
          font-size: 1.8em;
        }
      }
    }
  }
}

演示：http://codepen.io/ourcore/pen/eBWxLz

Answer 1

您的.event-card为inline-block，因此默认情况下它们与基线垂直对齐。

在vertical-align: top班级上使用.event-card：

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

http://codepen.io/anon/pen/ZBKwPO

Answer 2

因为vertical-align的默认值为baseline。这应该解决它。

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

Answer 3

我会漂浮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.
}

Div内容按下邻近的div

3 个答案: