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 .picture-holder引起的align-content: flex-start，默认情况下会调整项目的高度。擦掉它。或者，如果必须保持弯曲，则可以添加List<Integer>。

Answer 2

这是使用flexbox的属性之一，具有相同高度的孩子。一个解决方案就是重新陷入障碍和浮动。

您可以做的最好的事情是使用align-items属性。

＆＃13;

.list { 
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  list-style-type: none;
}

.list-item {
  width: 200px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid #F00;
}

＆＃13;

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <img src="http://baconmockup.com/250/200" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
	
	 <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
  
</ul>

＆＃13;

部分取自Lotte Jackson

的代码

auto div height适用于第一个容器但不适用于第二个容器

2 个答案: