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

vddsk6oq 于 2024-01-04 发布在其他

关注(0)|答案(2)|浏览(109)

我有一个CSS布局问题。我有3个div水平对齐。像这样.
div1div2div3
我需要div随着屏幕变小而改变顺序。例如，在一定的尺寸下，它们会像这样出现。Div2和3紧挨着，Div1在下面。
div2div3
div1个
如果你再小一点，它们就会以这样的顺序垂直排列...
div2个
div1个
div3个
我能够通过使用display:none和创建复制的div版本，并根据屏幕大小打开和关闭它们来实现这一点。我听说这种事情对SEO来说是不好的。查看我的代码，谷歌会看到相同数据的多个副本几次。有没有更好的方法来完成这一点？
谢谢你告诉我订单。我越来越接近。现在我需要的DIV标记文本下出现在其他2个div在1200宽度居中。然后一切都在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;}
}

个字符

Html

来源：https://stackoverflow.com/questions/77715431/css-how-can-i-change-order-of-divs-based-on-screen-size

2条答案

按热度按时间

xzv2uavs1#

就像评论建议的那样。你可以使用带有order属性的flexbox来实现它。但是你也可以考虑使用网格布局来实现更灵活的控制。

.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;
  }
}

个字符

赞(0）回复(0）举报 2024-01-04

093gszye2#

是的，有一种更好的方法可以实现这种响应式布局，而无需复制内容并使用display：none。您可以使用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：wrap允许在没有足够空间时将项目换行到下一行。媒体查询（@media（max-width：600 px））将项目的flex-basis设置为100%，使它们在较小的屏幕上垂直堆叠。
您可以根据自己的具体设计要求调整媒体查询断点和样式。与重复内容相比，这种方法可以确保代码更干净，更SEO友好。

赞(0）回复(0）举报 2024-01-04

我来回答

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

2条答案

相关问题

热门标签

最新问答