如何在智能手机上相邻显示两个div?

用户名

我有4div,在正常的计算机屏幕上,它们并排显示以下代码。

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 { 
  grid-area: 1 / 1 / 2 / 2; 
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 1 / 3 / 2 / 4; 
}

.div4 {
  grid-area: 1 / 4 / 2 / 5;
}
<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

当我在智能手机上查看此内容时,所有内容4 divs都会显示1在行中。我怎样才能显示2 divs1 row所以最终的结果将是2 rows2 divs每一个在智能手机上。

炸玉米饼

更改此行:grid-template-columns: repeat(4, 1fr);到:grid-template-columns: repeat(2, 1fr);那么每行只有2列。

然后将以下行更改为:grid-template-rows: 1fr;至:grid-auto-rows: auto;自动根据需要插入尽可能多的行,并将其大小设置为最高内容。

最后但并非最不重要的一点:删除所有div-box的css,因为它们在这种情况下仍然无用。也不是它应该或应该使用的方式。

使用媒体查询针对以下示例中使用的不同屏幕尺寸调整设计:

@media启动媒体查询。only screen定义,只有屏幕尺寸应作为规则。and (max-width: 480px)定义要应用于移动屏幕的规则(纵向模式最大宽度为480像素)。

.parent {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 0px;
}

@media only screen
  and (max-width: 480px) {
    .parent {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen
  and (min-width: 481px) {
    .parent {
      grid-template-columns: repeat(4, 1fr);
    }
}
<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在智能手机上安装两个操作系统

来自分类Dev

FullPage JS:如何在智能手机上“禁用” FullPage并将部分显示为长页?

来自分类Dev

如何在物理Android智能手机上跟踪运行说明/分支机构?

来自分类Dev

连接两个没有Internet的智能手机(颤振)

来自分类Dev

使两个元素适应智能手机屏幕

来自分类Dev

如何在xamarin中单击智能手机,并在winforms上显示结果?

来自分类Dev

我为何在android智能手机上有一个内部IP地址

来自分类Dev

Bootstrap布局在智能手机上过宽

来自分类Dev

OOP设计与智能手机上的性能

来自分类Dev

在智能手机上运行VBA

来自分类Dev

陀螺仪:如何在智能手机上将数据转换为世界坐标系?

来自分类Dev

如何仅在智能手机上编码Bootstrap手风琴

来自分类Dev

HTML和CSS布局在智能手机上无法正确显示

来自分类Dev

获取1200像素页面以在智能手机上正确显示

来自分类Dev

如何获取智能手机上安装的杀毒软件信息?

来自分类Dev

如何在智能手机同一桌面上的jwplayer中显示控件

来自分类Dev

如何在智能手机同一桌面上的jwplayer中显示控件

来自分类Dev

如何使我的网站响应智能手机

来自分类Dev

如何安装智能手机以恢复文件

来自分类Dev

如何在Windows中将Android智能手机安装为驱动器?

来自分类Dev

如何在Windows计算机上安装所有智能手机驱动程序以与adb一起使用

来自分类Dev

我可以在Android智能手机上调试Android Wear应用程序吗?(如何)

来自分类Dev

android智能手机上的固定宽度html布局

来自分类Dev

Github仅在智能手机上页面CSS麻烦

来自分类Dev

防止在智能手机上滚动特定屏幕尺寸

来自分类Dev

除非已缓存,否则SVG图片不会在智能手机上加载

来自分类Dev

React网站按钮和输入在智能手机上不起作用

来自分类Dev

为什么程序在特定的智能手机上抛出OutOfMemoryError?

来自分类Dev

使用Three.js对球体进行纹理处理无法在智能手机上使用

Related 相关文章

  1. 1

    在智能手机上安装两个操作系统

  2. 2

    FullPage JS:如何在智能手机上“禁用” FullPage并将部分显示为长页?

  3. 3

    如何在物理Android智能手机上跟踪运行说明/分支机构?

  4. 4

    连接两个没有Internet的智能手机(颤振)

  5. 5

    使两个元素适应智能手机屏幕

  6. 6

    如何在xamarin中单击智能手机,并在winforms上显示结果?

  7. 7

    我为何在android智能手机上有一个内部IP地址

  8. 8

    Bootstrap布局在智能手机上过宽

  9. 9

    OOP设计与智能手机上的性能

  10. 10

    在智能手机上运行VBA

  11. 11

    陀螺仪:如何在智能手机上将数据转换为世界坐标系?

  12. 12

    如何仅在智能手机上编码Bootstrap手风琴

  13. 13

    HTML和CSS布局在智能手机上无法正确显示

  14. 14

    获取1200像素页面以在智能手机上正确显示

  15. 15

    如何获取智能手机上安装的杀毒软件信息?

  16. 16

    如何在智能手机同一桌面上的jwplayer中显示控件

  17. 17

    如何在智能手机同一桌面上的jwplayer中显示控件

  18. 18

    如何使我的网站响应智能手机

  19. 19

    如何安装智能手机以恢复文件

  20. 20

    如何在Windows中将Android智能手机安装为驱动器?

  21. 21

    如何在Windows计算机上安装所有智能手机驱动程序以与adb一起使用

  22. 22

    我可以在Android智能手机上调试Android Wear应用程序吗?(如何)

  23. 23

    android智能手机上的固定宽度html布局

  24. 24

    Github仅在智能手机上页面CSS麻烦

  25. 25

    防止在智能手机上滚动特定屏幕尺寸

  26. 26

    除非已缓存,否则SVG图片不会在智能手机上加载

  27. 27

    React网站按钮和输入在智能手机上不起作用

  28. 28

    为什么程序在特定的智能手机上抛出OutOfMemoryError?

  29. 29

    使用Three.js对球体进行纹理处理无法在智能手机上使用

热门标签

归档