Question

我有4张图片的图片库。

图像可以有不同的高度，但我需要用html / css制作相同高度的列（图像拉伸）。

一切正常，直到我没有放<!DOCTYPE html>

所有其他页面都适用于此DOCTYPE，因此我无法删除它。

如何修复我的代码，它与我的DOCTYPE运行良好？

img {
  width: 100%;
  max-width: 100%;
}
.cb {
  clear: both;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.col1 {
  width: 40%;
  flex-flow: column;
  display: flex;
}
.col2 {
  width: 60%;
}
.gallery-top {
  display: flex;
}

<div class="gallery-top">
  <div class="fl col1">
    <div class="">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=40" />
    </div>
    <div class="" style="flex: 1; display: flex;">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=120" />
    </div>
    <div class="cb"></div>
  </div>
  <div class="fl col2">
    <div class="">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" />
    </div>
    <div class="">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" />
    </div>
    <div class="cb"></div>
  </div>
  <div class="cb"></div>
</div>

Answer 1

<!DOCTYPE html>告诉浏览器存在的代码是HTML5，因此浏览器正确理解它。你的所有文件都应该有。

请参阅此 link 以供进一步阅读。

你的标记（html）有点乱，你有空类属性。尝试始终保持您的代码清洁和有条理。使用类，id并在样式表中正确引用它们。不要使用内联样式，除非您手头的具体问题需要它们。

这就是说，我建议您了解有关使用flexbox的更多信息，并避免在未来的实例中使用它。

您可以找到有关使用flex-box here.

的更多信息

我制作了 Fiddle ，以帮助您更好地理解这个概念。

设置相同的高度列

1 个答案: