响应式图像库Div高度问题 - CSS

Question

我正在尝试按照w3schools教程建立一个响应式图库。除了一个严重的问题外，一切似乎都很好。我google了很多，但找不到任何银弹解决方案来解决它。我发布了一个屏幕截图，让您更好地了解我的问题。这是一个看：

真正的问题是非常明显的。对。那我们该怎么办？我们是否应该为每个div提供最小高度？文本来自数据库，有时必须显示完整的文本而不进行修改。

注意：

使用最小高度会导致另一个问题。当我们将浏览器的大小调整为标签宽度时，它会在div行之间创建大量空白。

Answer 1

您尚未发布代码，因此我可以为您提供flexbox解决方案。

这是一个Fiddle。

这些灵活的框将根据文本进行拉伸，它们将适合父容器，无论内部文本如何。我希望它会对你有所帮助。 Flexbox是一个非常强大且易于学习的布局系统，并且可以移动就绪。

 .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 500px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    flex-basis: 200px;
    margin: 10px;
}
.img {
  width: 200px;
  max-width: 100%;
  height: auto;
}

Answer 2

如果需要（几乎）完整且有保证支持最新的IE版本（或者您想要某种后备版本），并且您不希望使用JavaScript，那么还可以选择使用{{1}在容器和图像包装器text-align: center以及display: inline-block上。

实际上并不需要vertical-align: top，但它会使图像包装器（图像和图像文本的容器）居中。

这仍然会在图像包装器下面留下一些空白区域，但每个图像都会在同一条线上开始，可以这么说。

根据@Julsy的布局，你可以看到一个小提琴：the fiddle

注意：
由于text-align: center元素，此解决方案在空白方面确实存在轻微缺点。这意味着有时将两个inline-block元素设置为50％宽度，每个元素都会跳转到每个单独的行。但是，我在几个应用程序中使用了这个解决方案，只需将宽度设置为49％，例如在许多情况下，差异根本不明显，并且考虑到元素之间的空白，它们通常是正确对齐的（在我看来）。白色空间甚至可以弥补元素之间的一些间距，例如边距。

空白区域源自HTML文档文本中的实际空格。

您可以阅读一些关于这些空白现象here的内容。它似乎并非真正的错误，而只是浏览器的工作方式。

我认为最漂亮的解决方案肯定是@Julsy建议的（flexbox方法）。

至于为什么你自己的代码不起作用是由于inline-block。当其中一个元素低于另一个元素（低float）时，其后面的元素将“浮动”在它下面。我认为这背后的逻辑可以被认为如下（如果我错了，请纠正我）：如果你查看包含元素是一组“文本行”（如在常规书籍或文本中）从左到右的阅读方向，height元素将尽可能靠近左上角（这是你开始阅读的地方）。在这种情况下，左上角最近的位置在下部元素下方，因为它位于最高元素底部上方的“线”上。

我希望它有道理： - ）

Answer 3

正如您已经写过的那样，min-height是使这些浮动框具有相同高度的最佳方法，并且如果有更多内容，仍然具有“emergeny选项”来扩展它们。

Answer 4

将display：flex添加到父元素。有关flexbox.

的详细信息

Answer 5

我试着用同样的css做同样的事，但是我累了，也许你可以使用javascript来适应不同高度的这类东西，因为这些需要计算，我用这个：http://masonry.desandro.com/基本上这会将每个元素转换为绝对位置，并从prevs / next元素中给出它的顶部和左侧位置，例如

• 第一个（尺寸100x200）将离开0和前0，
• 第二个（尺寸100x400）将保留100和顶部0，
• 第三个（尺寸100x200）将离开0和前200，
• 四个（尺寸100x200）将留下100和顶部400）

并继续......