时间戳

首页 > 解决方案 > 画廊容器没有拉伸/扩展以适应独特的内容，而是保持固定在一种尺寸（画廊中最大的子元素）？

html - 画廊容器没有拉伸/扩展以适应独特的内容，而是保持固定在一种尺寸（画廊中最大的子元素）？

问题描述

图库容器不会自动拉伸/收缩以容纳独特的内容？每个画廊元素保持一个固定的高度（最大的孩子）。

首先，我在一个更大的容器（'two'）中创建了几个容器（'thumbnail2'），并使用 flexbox 在 CSS 中排列它们。然后我将一张图片（所有不同的尺寸）和一些文本（不同的内容）添加到 HTML 中的六个不同的“thumbnail2”div 中。

包含图像+文本的容器（'thumbnail2'）不会动态调整以适应内部的内容。一切都显示出来了，但容器的高度似乎固定为最大子元素的大小，因此容器周围有相当多的空白空间，里面的内容较少。我希望每个容器都能自动拉伸和收缩以适应里面的东西。我想如果我在 CSS 中省略了“高度”，那么它会自动执行此操作吗？

我留下了一个间隔不均匀的画廊。如果容器中填充了不同大小的 div，容器是否会保持固定大小？

如何让每个元素之间的间距在每列中均匀分布？

HTML：

<div class="two">

<div class="thumbnail2">

  <div class="photo">
    <img src="img/DP2.jpg" alt="DP2">
    </div>

    <div class="phototext">
      <h3>Glossy, shiny leaves</h3>
      <h4>
        Set your past on fire and leave. 
        </h4>
      </div>

  </div>

CSS:

.two {
  width: 750px;
  margin:10px;
display:flex;
justify-content: center;
  flex-flow:row wrap;
  border-bottom: 1px solid black;
}

.thumbnail2 {
  width:220px;
background-color: violet;
  margin:10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow:column;
}

.photo {
  width:220px;
line-height: 0;
  background-color: skyblue;
}

.photo img {
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: top;
}

.phototext {
  width:220px;
height:auto;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow:column;
}

标签： htmlcss

解决方案

推荐阅读