响应列的问题

Question

希望有人能帮帮我。

我试图将文本在笔记本电脑屏幕上分为 3 列，平板电脑分为 2 列，phone 分为 1 列。

我正在使用下面的代码，它适用于 3 列，但响应位不起作用，关于如何修复它有什么想法吗？

在容器内找到 .about

非常感谢！！！

.container {
  display: flex;
  align-items: center;

}


.about {

  columns: 3;
  column-fill: balance-all;
  column-gap: 1.5em;
  padding: 2em 4em;
  font: 1em/1.2 "special elite", serif;
  hyphens: auto;
  text-align: center;
  color: black;

}

@media only screen and (max-width: 810px) {
  .about {
    columns: 2;
  }
}

Answer 1

CSS 你分享的完全没问题，但我更喜欢你尝试使用 column-count 而不是列。

谢谢

Answer 2

我添加了一个移动媒体查询和一个更新的平板电脑媒体查询。

.container {
  display: flex;
  align-items: center;

}

.about {
  columns: 3;
  column-fill: balance-all;
  column-gap: 1.5em;
  padding: 2em 4em;
  font: 1em/1.2 "special elite", serif;
  hyphens: auto;
  text-align: center;
  color: black;

}

/*Tablet CSS*/
@media only screen and (max-width: 992px) {
  .about {
    columns: 2;
  }
}

/*Mobile CSS*/
@media only screen and (max-width: 767px) {
  .about {
    columns: 1;
  }
}

    <div class="about">
        
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>

响应列的问题

Issues with Responsive columns

css

multiple-columns

flexbox

responsive-design

responsive