html - CSS 将双列 block 内的列表扩展到完整的行高，同时在第二列中有一个动态大小的图像

Question

我有一个固定宽度和最大高度大小的 block 。我需要在这个 block 中放置两个元素:一个列表和一个动态大小的图像。它们必须像表中的列一样处于一个级别。列表必须占主 block 宽度的 20%，图像占宽度的 80%。当窗口宽度减小时，图像会改变其大小。我需要列表填满整个行高，同时为每个列表项保留相同的高度。

我只能借助 CSS 才能实现吗？我也不想使用 display: grid 和 display: flex 来解决浏览器兼容性问题。在这种情况下，放弃 ui li 以将每个列表项表示为简单的 div 是不可能的或过于复杂的解决方案。

如果只有在 grid 或 flex 的帮助下才有可能，那么无论如何我都会感谢这样的解决方案。

一个例子: https://jsfiddle.net/Eugenii10/y0otpo2e/2/

我想得到的: https://i.imgur.com/CL3m3Df.jpg

提前致谢!

Answer 1

这可以用flex-box来完成

DEMO

#wrapper {
  border: 1px solid black;
  display: flex;
}

#firstCol { width: 28%; }

#firstCol ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  height: 100%;
  flex-direction: column;
  display: flex;
}

#firstCol ul > li {
  display: flex;
  flex-grow: 1;
}

#firstCol ul > li > a {
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
  flex-grow: 1;
  padding: 1rem 0;
}

#secondCol {}

#secondCol img {
  max-width: 100%;
  max-height: 300px;
}