0

我有一个 2 列网格，如下所示：一些文本，然后是与该文本相关的图像。在另一行，顺序颠倒：

| Text 1           | Image for Text 1 |
| Image for Text 2 | Text 2           |
| Text 3           | Image for Text 3 |

我创建了一个标准网格来实现它（jsfiddle：https ://jsfiddle.net/6yxLpqmr/ ），从源代码中提取：

<div class="pure-g">
  <article class="pure-u-1 pure-u-md-1-2">Text 1</article>
  <article class="pure-u-1 pure-u-md-1-2">Image for Text 1</article>
  <article class="pure-u-1 pure-u-md-1-2">Image for Text 2</article>
  <article class="pure-u-1 pure-u-md-1-2">Text 2</article>
  <article class="pure-u-1 pure-u-md-1-2">Text 3</article>
  <article class="pure-u-1 pure-u-md-1-2">Image for Text 3</article>
  <!-- many more alternating articles like this -->
</div>

但是，一旦网格在窄屏幕上折叠，就会导致：

Text 1
Image for Text 1
Image for Text 2
Text 2
Text 3
Image for Text 3
<...>

这是不直观的。

Q1：如何将结果更改为：

Image for Text 1
Text 1
Image for Text 2
Text 2
Image for Text 3
Text 3

Q2：是否有可能以一种自行创建交替的方式编写 CSS（当然不生成 CSS），同时在语义上保持 HTML“有序”（图像/文本/图像/文本/...）？

4

2 回答 2

2

最好创建子框并使用 flex-direction: column-reverse。在这里查看jsFiddle。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" />
    <style>
        article {
            min-height: 100px;
            min-width: 200px;
        }
        .box {
            display: flex;
            flex-direction: column;
        }
        @media screen and (max-width: 600px) {
             .box:first-child {
                flex-direction: column-reverse;
             }
        }
    </style>
</head>

<body>

    <div class="pure-g">
        <div class="box">
            <article class="pure-u-1 pure-u-md-1-2">Text 1</article>
            <article class="pure-u-1 pure-u-md-1-2">Image for Text 1</article>
        </div>
        <div class="box">
            <article class="pure-u-1 pure-u-md-1-2">Image for Text 2</article>
            <article class="pure-u-1 pure-u-md-1-2">Text 2</article>
        </div>
    </div>
</body>
</html>
于 2021-11-11T08:15:44.417 回答
1

您可以使用order适当的媒体查询来实现：

@media screen and (max-width: 425px) {
  .pure-g > article:nth-child(2) {
    order: -1;
  }
}

在此处查看更新的 jsFiddle或下面的代码段。

.pure-g > article:nth-child(2) {
  order: -1;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" />
    <style>article { min-height: 100px; min-width: 200px; }</style>
  </head>
  <body>
    <div class="pure-g">
      <article class="pure-u-1 pure-u-md-1-2">Text 1</article>
      <article class="pure-u-1 pure-u-md-1-2">Image for Text 1</article>
      <article class="pure-u-1 pure-u-md-1-2">Image for Text 2</article>
      <article class="pure-u-1 pure-u-md-1-2">Text 2</article>
    </div>
  </body>
</html>

于 2021-11-11T08:01:29.180 回答