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

Question

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

只有 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;
}

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

CSS expand a list inside a two column block to the full row height while have a dynamic-size image in the second column

html

css

css-tables