Выравнивание div с использованием @media

Question

У меня есть несколько ящиков, которые идеально выровнены во всех отношениях, за исключением разной высоты. Я хотел бы высот все равно. Они выравниваются внизу, по бокам, по краю страницы, но сверху они все разной высоты. Я доволен макетом 3х3, но как получить высоты все одинакового размера.

Страница: https://adsler.co.uk/find-an-event/

@media (min-width: 768px) {
  .box-layout {
    max-height: 100%;
  }
}

<div class="line-layout" style="display: none;">
  <li class="event_listing post-6985 
    type-event_listing status-expired 
    hentry" style="visibility: 
    visible;" data-latitude="" data- longitude="">
    <div class="event-info-row- 
    listing">
      <a href="https://adsler.co.uk/
    event/new-cross-and-deptford-free- 
    film-festival/">
        <div class="row">
          <div class="col- 
    md-1">
            <div class="organizer-logo">
              <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp- 
    content/uploads/event-manager-  
    uploads/event_banner/2019/05/2
    456d41f16399aed538d25b1cd32ad1
    4.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="event-title">
              <h4>New Cross and Deptford Free Film Festival</h4>
              <div class="boxes-view- 
    listing- 
    registered-code">
              </div>
              <div class="event- 
    organizer- 
    name">
                <normal>Deptford Film Festival
                  <normal></normal>
                </normal>
              </div>
            </div>
            <div class="col-md-2">
              <div class="date" <date>2019-05- 26
                </date>
              </div>
            </div>
            <div class="col-md-3">
              <div class="event- 
    location"><i class="glyphicon 
    glyphicon-map- 
    marker"></i> London </div>
            </div>
            <div class="col-md-2">
              <div class="event 
    ticket">#free</div>
            </div>
            <div class="col-md-3"></div>
          </div>
      </a>
      </div>
  </li>
  </div>
  <!-- Box Layout -->
  <a class="event_listing post-6985 
    type-event_listing status-expired 
    hentry" href="https://adsler.co.uk
    /event/new-cross-and-deptford-free- 
    film-festival/">
    <div class="box-layout">
      <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp- 
    content/uploads/event-manager-  
    uploads/event_banner/2019/05/2
    456d41f16399aed538d25b1cd32
    ad14.jpg"></div>
      <div class="boxes-view-box- 
    registered-code">
      </div>
      <div class="event-title">
        New Cross and Deptford Free Film Festival
      </div>
      <div class="event-start- 
    date">2019- 05-26
      </div>
      <div class="event-location">
        <i class="glyphicon glyphicon- 
    map-marker"></i> London </div>
      <div class="box-footer">
        <div class="event- 
    ticket">#free</div>
      </div>
    </div>
  </a>

Не сработало.

Answer 1

Проблема с вашим тегом img. Ваши изображения имеют разную высоту, поэтому у вас есть разные высоты каждой коробки. У вас есть 2 варианта:

1 - сделать все изображения одинаковой ширины и высоты (не так просто)

2 - вы должны исправить высоту img, попробуйте что-то вроде:

#content .entry-summary img.wp-post-image, #content .entry-content img { 
height: 250px;
}

.box-layout { 
width: 100%
}

это должно работать, как вы хотите.

обратите внимание, что слева и справа от каждого изображения будет некоторое поле из-за разных размеров.

снимок экрана после редактирования, как указано выше:

Answer 2

Высота ваших ящиков определяется размером изображений. К счастью, ваши изображения обернуты в содержащий div с классом event-img. Таким образом, вместо изменения размера всех ваших изображений, вы можете просто дать .event-img max-height короче, чем любое из ваших изображений, и установить его overflow: hidden

.event-img {
    max-height: 190px;
    overflow: hidden;
}