Question

我有一些盒子，除了高度不同，它们在各个方面都完美对齐。我希望所有的高度都一样。它们在底部，侧面和页面边缘对齐，但在顶部它们都是不同的高度。我对3 x3的布局感到满意，但是如何获得相同大小的高度。

页面：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

盒子的高度取决于图像的大小。幸运的是，您的图像被包装在包含类event-img的div中。因此，无需调整所有图像的大小，只需给.event-img短一个max-height的图像，然后将其设置为overflow: hidden

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

使用@media对齐div

2 个答案: