响应列的问题

发布于 2025-01-29 14:23:33 字数 508 浏览 1 评论 0原文

希望有人可以帮助我。

如果在笔记本电脑屏幕上，在平板电脑的2列中，我试图将文本分为3列，而1列则用于手机。

我正在使用下面的代码，它在3列中运行良好，但是响应次数不起作用，如何解决该列的任何想法？

.abion在容器

TK中发现了很多！！！

.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;
  }
}

原文

Hope someone can help me out.

I am trying to have a text divided in 3 columns if on a laptop screen, in 2 columns for a tablet and 1 column for a phone.

I am using the code below and it works well for the 3 columns but the responsive bit is not working, any ideas on how to fix it?

The .about is found inside the container

Tks a lot!!!

.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;
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

°如果伤别离去 2025-02-05 14:23:34

我为移动设备添加了媒体查询，并为平板电脑添加了更新的媒体查询。

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

I have added a media query for mobile and an updated media query for tablet.

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

回复收藏 0 原文