如何制作交替响应网格？
[英]How to make an alternating responsive grid?
问题描述
I have a 2-column grid as follows: some text, followed by an image related to that text.
我有一个 2 列网格，如下所示：一些文本，然后是与该文本相关的图像。 On the other row the order is flipped:在另一行，订单被翻转：
| Text 1 | Image for Text 1 |
| Image for Text 2 | Text 2 |
| Text 3 | Image for Text 3 |
I created a standard grid to achieve it (jsfiddle: https://jsfiddle.net/6yxLpqmr/ ), extract from source:我创建了一个标准网格来实现它（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>
However, once the grid is collapsed on a narrow screen, it results in:但是，一旦网格在窄屏幕上折叠，就会导致：
Text 1
Image for Text 1
Image for Text 2
Text 2
Text 3
Image for Text 3
<...>
Which is un-intuitive.这是不直观的。
Q1: How can I change the result to: Q1：如何将结果更改为：
Image for Text 1
Text 1
Image for Text 2
Text 2
Image for Text 3
Text 3
Q2: is it possible to write CSS in a way that creates the alternation by itself (without generating the CSS of course), while semantically keeping the HTML "in order" (image/text/image/text/...)? Q2：是否可以通过自己创建交替的方式编写 CSS（当然不生成 CSS），同时在语义上保持 HTML“有序”（图像/文本/图像/文本/...）？
2 个解决方案
解决方案1
2 已采纳 2021-11-11 08:15:44
It is better to create child box and use flex-direction: column-reverse.最好创建子框并使用 flex-direction: column-reverse。 Check out the jsFiddle here.在这里查看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>
解决方案2
1 2021-11-11 08:01:29
You can use order along with an appropriate media query to achieve that:您可以使用order和适当的媒体查询来实现：
@media screen and (max-width: 425px) {
.pure-g > article:nth-child(2) {
order: -1;
}
}
Check out the updated jsFiddle here or the snippet below.在此处查看更新的 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.