响应式 CSS：将列始终彼此相邻定位

Question

在桌面上有 4 列彼此相邻，在平板电脑上只有 2 列彼此相邻。 不知何故，这两列不会按照应有的方式对齐。

我总共使用了 12 列。 col-x 用于台式机，col-s-x 用于平板电脑。

桌面设计按预期工作：

平板电脑版本：

仅当我删除第一列的一些文本时，第二行的列才会彼此相邻放置：

*
{
    box-sizing: border-box;
}

[class*="col-"]
{
    float: left;
    padding: 15px;
    /*border: 1px solid red;*/
}

.row::after
{
    content: "";
    clear: both;
    display: table;
}

/* For mobile phones: */
[class*="col-"]
{
    width: 100%;
}

@media only screen and (min-width: 600px)
{
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px)
{
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

<div class="row">
  <div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text   
  </div>
  <div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text bla bla blu blo bla bla bltext text text text text text text text 
  </div>
  <div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  <div class="col-3 col-s-6">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text bla bla bla</div>
</div>

我搜索了一段时间，但不知道如何调用这种行为来更具体地研究。

当有第二行 div 时，它会在平板电脑上完美对齐，但会导致桌面版本崩溃。

感谢您的帮助！

Answer 1

我只是将整个代码与 CSS 一起复制粘贴到 React 应用程序中，并且工作得非常好。 如果它不适合您的情况，我可以建议您使用网格布局。 它会自动处理此类开箱即用的响应问题，您只需提及所需的列数即可。

以下是如何做到这一点的示例：

<div className="container">
      <div className="column One">Column 1</div>
      <div className="column Two">Column 2</div>
      <div className="column Three">Column 3</div>
</div>

然后您可以按如下方式使用CSS：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.column {
  background-color: pink;
}

如果您想针对不同的屏幕尺寸使用不同的列数， 然后您可以使用媒体查询并更改 repeat(, minmax(min-width-of-column-you-want, 1fr)) 属性中的数字。