CSS - 如何根据屏幕尺寸更改 DIV 的顺序？

问题描述 投票：0回答：1

我有一个 CSS 布局问题。 我有 3 个 div，彼此水平排列。像这样...

div1
div2
div3

随着屏幕变小，我需要改变 div 的顺序。例如，在一定尺寸下，它们会看起来像这样。 Div2 和 3 彼此相邻，div1 在下面。

div2
div3

div1

如果你变得更小，它们会按这个顺序出现垂直......

div2

div1

div3

我可以通过使用 

display:none
并创建 div 的重复版本并根据屏幕尺寸打开和关闭它们来实现此目的。我听说这种事情对 SEO 不利。查看我的代码，谷歌会多次看到相同数据的多个副本。有没有更好的方法来完成这个任务？

html css layout alignment
1个回答
0
投票

是的，有一种更好的方法来实现这种响应式布局，而无需重复内容和使用 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: 600px)) 将项目的 flex-basis 设置为 100%，使它们在较小的屏幕上垂直堆叠。

您可以根据您的具体设计需求调整媒体查询断点和样式。与复制内容相比，这种方法可确保代码更干净、更适合 SEO。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.