个人中心
gpt4 book ai didi

CSS 网格 - 如何使元素响应

转载 作者：行者123 更新时间：2023-11-28 00:55:21 25 4
gpt4 key购买 nike

我试图让这 2 个元素(box1 和 box2)在小屏幕上响应，但我似乎无法弄清楚。请帮忙。谢谢!

<html lang="en">
<head>
    <style>
      body{
          background: lightblue;
        }
      .container{
          padding:10px;
          display: grid;
          background: lightyellow;
          width:100%;
          grid-gap:5px;
          justify-content:center;
          grid-auto-flow: column;
          grid-auto-columns: 300px 100px;
        }
      .box1{
          background: lightgray;
          min-height:150px;
        }
      .box2{
          background: lightgreen;
          min-height:150px;
        }
    </style>
</head>
<body>
    <div class="container">
      <div class="box box1">BOX 1</div>
      <div class="box box2">BOX 2</div>
    </div>
</body>
</html>

最佳答案

您已将列设置为固定宽度...因此它们自然不会响应。

改用百分比或分数值。

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

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  background: lightblue;
}

.container {
  padding: 10px;
  display: grid;
  background: lightyellow;
  width: 100%;
  grid-gap: 5px;
  justify-content: center;
  grid-auto-flow: column;
  grid-auto-columns: 3fr 1fr;
}

.box1 {
  background: lightgray;
  min-height: 150px;
}

.box2 {
  background: lightgreen;
  min-height: 150px;
}
<div class="container">
  <div class="box box1">BOX 1</div>
  <div class="box box2">BOX 2</div>
</div>

关于CSS 网格 - 如何使元素响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52968087/

25 4 0
文章推荐： c++ - iostream.h 是否被编译？
文章推荐： jquery - 如何删除 jQuery Mobile 导航图标的圆形容器？
文章推荐： html - 仅当指定的兄弟存在时，如何更改 html 元素的 css 样式？
文章推荐： javascript - 如何获取出现在父标签之前的 textContent？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com