css 我怎么能把列下对方在移动的,但并排在pc上?

w7t8yxp5  于 2023-03-14  发布在  其他
关注(0)|答案(1)|浏览(97)

我希望列整齐地排列在移动的和PC上3以上和3以下我不能这样做,有人能帮助吗?
我试着在css中使用@media,但没有成功,而且看起来很奇怪

vhmi4jdf

vhmi4jdf1#

我明白,我记得有一天我在做一个练习项目时遇到了完全相同的问题。
你需要做的是使用 flexbox 旁边的媒体查询如果你知道与flexbox工作,这是超级容易与flexbox否则它会变得有点复杂,只是通过css,但仍然有可能得到它只是通过CSS.所以你需要做的是:
1:向容器给予显示flex

.container{
      display: flex;
      flex-wrap: wrap;
}

2:弹性缠绕的值应为缠绕
3:将您想要的宽度设置为媒体查询中带有百分比(%)的项目。

@media screen and (max-width: 400px){
      /* Phones */
      .items{
           width: 100%;
       }
}
@media screen and (min-width: 400px) and (max-width: 900px){
      /* Tablets & Laptops*/
      .items{
           width: 50%;
       }
}

相关问题