css - 自动 div 高度适用于第一个容器但不适用于第二个容器

Question

我有一些混合了肖像和风景的照片，我希望容器在上传时能够容纳这两种照片，

height: auto 

将适用于第一个容器(纵向图片)，但随后对下一个容器(横向图片)保持相同的高度，但宽度将按预期变化。

这是我的意思的照片......

这是html:

      <div class="picture-holder">
        <div class="picture-single">
          <div class="picture-title">
            <p><%= count%>. <%= link_to "#{x.title}", picture_path(x.id) %> </p>
          </div>
          <div class="entry-image">
            <%= link_to picture_path(x) do %>
              <% if !x.image.landscape.url.nil? %>
                <% image_tag x.image.landscape.url %>
              <% else %>
                <% image_tag x.image.portrait.url %>
              <% end %>
            <% end %>
          </div>
          <div class="picture-details">
            <p>Uploaded by <%= link_to "#{x.user.username}(#{user_score(x.user.id)})", user_path(x.user) %> <br /><%= link_to "Comments(#{x.comments.count})", picture_path(x) %> </p> |
            <div class="">
              <% if is_yours?(x.id) %>
                <span class="text-green"> <%= link_to "Upvote", like_picture_path(x), method: :put %> </span>
                <span class="badge"><%= x.get_upvotes.size%></span>
                <span class="text-red"> <%= link_to "Downvote", unlike_picture_path(x), method: :put %> </span>
                <span class="badge"><%= x.get_downvotes.size%></span>
              <% else %>
                Upvote
                <span class="badge"><%= x.get_upvotes.size%></span>
                Downvote
                <span class="badge"><%= x.get_downvotes.size%></span>
              <% end %>
              <% if is_yours?(x.id) %>
                <span><p> <%= link_to "Report", new_report_path(:picture_id => x.id) %> </p></span>
              <% else %>
                <span class="text-red"><p> <%= link_to "Delete", picture_path(x), method: :delete %></p></span>
              <% end %>
            </div>
          </div>
        </div>
      </div>

这是CSS:

    .picture-holder{
      width: auto;
      height: auto;
      border: solid black;
      border-radius: 35px;
      background-color: white;
      margin: 60px 40px 0px 40px;
      display: flex;
    }

    .picture-single{
      width: auto;
      height: auto;
      margin-left: 5px;
      margin-right: 5px;
    }

    .picture-title{
      text-align: center;
      font-size: 1.5em;
    }

    .entry-image{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding-bottom: 10px;
    }

    .picture-details{
      margin: 0px 30px 0px 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 0.8em;
      text-align: center;
    }

我的 css 技能还没有达到标准，我找不到解决方案，所以任何关于如何获得高度以容纳容器的想法都将不胜感激。谢谢

Answer 1

这是由于 display: flex for .picture-holder，它默认调整元素的高度。擦掉它。或者，如果必须保持 flex，则可以添加 align-content: flex-start。