html - 仅当列宽可变时，如何使用 css 设计四列布局？

Question

我想要一个仅使用 CSS 的四列布局，其中列的宽度将响应。首先要了解我的问题，请看下面的代码:

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
  width: 25%;
}

.col1 {
  background-color: #89ffa2;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
}

<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

在上面的代码中，宽度被指定为 25%，因此它将响应地作为所有列的相等宽度。但是我不要这25%。我想要实现的是，在这种情况下，第 1 列和第 4 列非常小，因此第 1 列和第 4 列的大小将与其内容的宽度相同。但由于所有其他列都超出了 25% 的大小，因此它们将采用相同的宽度。此外，所有 4 列的高度将等于具有最大高度的列的高度。我希望它具有响应性，比如当屏幕尺寸变小时，那么在某些时候所有 4 列都必须具有相同的宽度。在这种情况下，第 1 列和第 4 列是虚拟的。我希望它是动态的，因为不知道哪一列的内容会更大，哪一列的内容会更小。

我希望它是这样的:

当屏幕调整大小时，它可能会变成这样:

仅使用 CSS 是否可行？也许，我可以说清楚。

Answer 1

有一个很好的旧 HTML 元素叫做 <table>

你可以创建 1 行 4 列的表格，给它 100% 的宽度。

现在根据您的喜好设置格式，它会自动调整包含更多文本的单元格的宽度。

我想 flexbox 是另一种解决方案，但所有浏览器都支持表格