Question

我有以下问题：我试图在彼此相邻的一行信息中显示4列。现在，这工作正常，但是当我调整页面大小时，列不会破坏显示在新行上。那么如何更改它以使列可以在彼此之间显示？提前谢谢。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

因此，在思考响应时，表格不是最佳选择。使用浮动或媒体查询将是解决它的方法。查看盒子模型的教程。

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

使用填充和边距将它们放置在您想要的位置

调整大小时，显示彼此相邻的4列以及彼此之间的列

1 个答案: