Question

我正在尝试将CSS网格与位置结合起来，以使我的页面有效地适应不同的屏幕尺寸。我的想法是使用await Task.Run(() => ...为移动设备设计一种网格，为桌面设计一种网格。

我的想法是让网格块由网格驱动，而网格块中的内容由位置驱动。

现在我的理解是，网格将基于列和行创建一个虚构的矩形，当我使用位置时，它将锁定在网格块的一个角上。

问题

01我对这个概念的误解在哪里？

02有更好的方法吗？

我的代码：

@media(screen-width)

我得到了什么。

我想要什么。 {{3}}

Answer 1

放置元素时要注意。当您应用position:fixed;时，它不会尊重其父容器，它将严格遵守视口的视图。

也许您可以尝试对子元素使用position:absolute;并将position:relative;赋予其父容器，使其位于其父容器中

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Grid</title>
  <style>
  .wrapper_main{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-auto-rows:minmax(100px, auto);
    grid-gap:1em;
    justify-items:stretch;
    align-items:stretch;
  }
  .box0{
    grid-column:1/6;
    grid-row:1;
    border:1px solid #333;
  }

  .box1{
    grid-column:1/6;
    grid-row:2/6;
    border:1px solid #333;
    position:relative;
  }
  .seconds01{
       position:absolute;
       right:20px;
       top:50px;
  }

  .seconds05{
     position:absolute;
       right:100px;
       top:50px;
  }
  </style>
</head>
<body>
  <div class="wrapper_main">
    <div class="box box0">Box 0</div>
    <div class="box box1">
        <a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
        <a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
    </div>
  </div>
</body>
</html>

在位置/变换中使用CSS网格

1 个答案: