代码之家 › 专栏 › 技术社区 › CheeseFlavored

CSS-如何根据屏幕大小更改DIV的顺序?

alignment layout css html

CheeseFlavored · 技术社区 · 2 年前

我有一个CSS布局问题。我有3个水平排列的div。这样地。。。

div1 div2 div3

我需要div随着屏幕变小而改变顺序。例如,在一定的尺寸下,它们会显示为这样。Div2和Div3紧挨着,div1在下面。

div2 div3

div1

如果你变得更小,它们会按照这个顺序垂直出现。。。

div2

div1

div3

我能够通过使用 display:none 以及创建div的重复版本,并根据屏幕大小打开和关闭它们。我听说这种事情对SEO不好。查看我的代码,谷歌会多次看到相同数据的多个副本。有更好的方法来完成这项工作吗?

谢谢你告诉我关于订单的事。我快到了。现在,我需要标记为TEXT的DIV以1200宽度显示在其他2个DIV的中心。然后所有东西都垂直居中,宽度为800。

#container {
display: flex;flex-flow: row wrap;justify-content: center;gap:50px 25px;
}

#div1 {width :150px;border:1px solid red;order:1;display:block}
#div2 {width :150px;border:1px solid red;order:2;display:block}
#div3 {width :150px;border:1px solid red;order:3;display:block}


@media (max-width: 1200px) {
#div1 {order:3;}
#div2 {order:1;}
#div3 {order:2;}
}


@media (max-width: 800px) {
#div1 {order:2;}
#div2 {order:1;}
#div3 {order:3;}
}

<div id="container">


<div id="div1">
TEXT
</div>

<div id="div2">
Image
</div>

<div id="div3">
VIDEO
</div>



</div>

2 回复 | 直到 2 年前

Hao Wu 2 年前

就像评论建议的那样。您可以将flexbox与 order 属性来实现它。但您也可以考虑使用网格布局来实现更直观的控制

.container {
  display: grid;
  grid-auto-flow: column dense;
  justify-content: center;
  justify-items: center;
  gap: 8px;
}

.container .item {
  width: 150px;
  padding: 10px;
  border: solid 1px currentColor;
}

@media screen and (width < 1200px) {
  .container .item:nth-child(1) {
    grid-row: 2;
    grid-column: 1 / span 2;
  }
}

@media screen and (width < 800px) {
  .container .item:nth-child(1) {
    grid-column: initial;
  }
  
  .container .item:nth-child(3) {
    grid-row: 3;
  }
}

<div class="container">
  <div class="item">TEXT</div>
  <div class="item">Image</div>
  <div class="item">Video</div>
</div>

-2

remig17 2 年前

是的,有一种更好的方法可以在不复制内容和使用显示的情况下实现这种响应式布局:无。您可以使用CSS Flexbox或CSS Grid创建一个响应式布局,根据屏幕大小重新排序div。

下面是一个使用CSS Flexbox的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            flex: 1;
            min-width: 0; /* Allow items to shrink */
            box-sizing: border-box;
            padding: 10px;
        }

        @media (max-width: 600px) {
            .item {
                flex-basis: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">div1</div>
        <div class="item">div2</div>
        <div class="item">div3</div>
    </div>
</body>
</html>

在本例中,容器使用display:flex创建一个flex容器,而flex wrap:frap允许在空间不足时将项目包装到下一行。媒体查询(@media(最大宽度:600px))将项目的弹性基础设置为100%,使它们在较小的屏幕上垂直堆叠。

您可以根据自己的具体设计要求调整媒体查询断点和样式。与复制内容相比,这种方法确保了更干净、更SEO友好的代码。