html - 调整大小时显示 4 列并排显示

Question

我有以下问题:我正在尝试在 1 行信息中并排显示 4 列。现在，这工作正常，但是当我调整页面大小时，列不会中断以显示在新行上。那么我将如何更改它以使列可以相互显示？提前致谢。

.Row {
  display: table;
  width: 100%;
  table-layout: auto;
  border-spacing: 20px;
}
.Column {
  display: table-cell;
  font-size: 16px;
}

<div class="Row">
  <div class="Column">
    TEST 1
  </div>

  <div class="Column">
    TEST 2
  </div>

  <div class="Column">
    TEST 3
  </div>

  <div class="Column">
    TEST 4
  </div>
</div>

Answer 1

因此，在考虑响应式时，表格不是可行的方法。使用 float 或媒体查询将是解决它的方法。查看盒子模型的教程。

.Row {
  width: 100%;
  border-spacing: 20px;
}
.Column {
    font-size: 16px;
    float: left;
    padding: 0 100px;
}

使用填充和边距将它们放在你想要的地方