css 如何从不同的部门重新订购商品?[已关闭]

y53ybaqx  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(96)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
4天前关闭。
Improve this question
有来自两个单独的div的元素,后来在移动的版本中,在一个div中,顺序不同,正如我用颜色显示的那样。
我尝试使用display:flex和ordering元素,但没有用,因为这些元素来自单独的div

col17t5w

col17t5w1#

如果你可以定义列和行,你可以用css网格来定义,但是网格有一些限制。
你到底在做什么这个设计看起来

div{
  min-height:10px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1em;
}

.green{
  background:green;
  grid-column:1;
}

div.blue{
  background:blue;
  grid-column:1;
}

.purple{
  background:purple;
  grid-column:1;
  height: 300px;
}

.orange{
  background:orange;
  grid-column:2;
  grid-row:1;
  height: 100px;
}

.pink{
  background:pink;
  grid-column:2;
  grid-row:2
  height: 100px;
}


@media (max-width:500px){
 .grid{
    grid-template-columns: 1fr;
  }
  
  .green{
    grid-column:1;
    grid-row:1;
  }
   .orange{
    grid-column:1;
    grid-row:2;
  }
  
  .blue{
    grid-column:1;
    grid-row:3;
  }
  
  .pink{
    grid-column:1;
    grid-row:4;
  }
  
  .purple{
    grid-column:1;
    grid-row:5;
  }
  
}
<div class="grid">
<div class="green"></div>
<div class="blue"></div>
<div class="purple"></div>
<div class="orange"></div>
<div class="pink"></div>
</div>

相关问题