div內容向下推相鄰的divs

我有三個相鄰寬度相等的div，我試圖弄清楚爲什麼第一個裏面有一個額外的按鈕的內容推倒了另外兩個div。這是顯示問題嗎？在嘗試手動對齊它們之前，我寧願理解原因。謝謝！div內容向下推相鄰的divs

這裏是我的標記：

<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

來源

2016-11-23 Mario Parra

你.event-card s爲inline-block所以它們在默認情況下垂直對齊基線。

在.event-card類使用vertical-align: top：

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

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

來源

2016-11-23 16:38:27 Turnip

由於vertical-align默認值是baseline。這應該解決它。

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

來源

2016-11-23 16:38:18 Stickers

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

來源

2016-11-23 16:39:20 Fencer04

div內容向下推相鄰的divs

回答

相關問題