Question

我正在尝试使用媒体查询，以便一旦我的布局宽度低于800像素，它就会进入一列，并在图像下方显示相关说明。

但是顺序不正确，我先得到图像，然后得到描述。

我要去哪里错了？

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.one img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.two img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.three {
  padding: 20px;
  background: wheat;
}

.four {
  padding: 20px;
  background: gray;
}

@media only screen and (max-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

<div class="container">

  <div class="one">
    <img src="https://picsum.photos/id/600/600/300">
  </div>

  <div class="two">
    <img src="https://picsum.photos/id/600/601/300">
  </div>

  <div class="three">
    This is the description for the first image
  </div>

  <div class="four">
    This is the description for the second image
  </div>

</div>

Answer 1

根据我的评论，也许不是您想要的答案（我正在等待反馈，所以我同意这个主意……太久了，不能只是评论）。

运行HTML样式时，img和描述不匹配。

您可以使用figure和figcaption来描述内容，并使用其描述，链接和图像在同一容器中进行描述，例如div + {{1} }也可以。

默认值，将使它们彼此堆叠，这是您期望的屏幕宽度小于900像素时的情况。没事做。

您需要介意它变宽的地方。那是您的媒体查询有用的地方。

下面是编码概念的演示：

/* commun style */
img {
  box-sizing:border-box;
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 1em 1em 0 1em ;
}
figure figcaption{
  display:block;
  margin:0 1em;
  background: wheat;
}

figure:nth-child(even) figcaption{
  background:gray
}

/* reordering visual layout when window is wider than 900px */
@media only screen and (min-width: 901px) {
/* grid , what you want to use */
  .container {
    display:grid;
    grid-template-columns:2fr 1fr;
  }
  /* not the best , we will try to make figure side by side looking like 2 rows .... */
  figure {
    display:flex;
    flex-direction:column;
  }
  /* to fake the rows, trying to set heights each should fill */
  img {
    flex:10
  }
  /* works for about 2 1em lines, then visual breaks */ 
  figcaption {
    flex:1
  }
  
  
  /* use of supports in case browser is able to get rid of figure in the way for the grid sytem set on container, This your initial idea, to use the grid model for img and text and draw a grid with cell alignement */
  @supports (display:contents) {
    figure {
      display:contents
    }
    img {
      grid-row:1;
    }
  }
}

不同的结构和display：contents的使用肯定不是您期望的，我希望它能带给您一些知识，而不是您的答案。请参阅下面指向有用资源的链接。

要使用的codepen：https://codepen.io/gc-nomade/pen/EJBmee

关于显示：

https://css-tricks.com/get-ready-for-display-contents/

问题在于，元素一起参与同一个CSS网格（或针对此问题的flexbox）的唯一方法是让它们成为同级元素。因此，在某些情况下，我们可能会出于布局的利益而被激励放弃HTML语义（不是很好）。

对此的一个答案是显示：contents；一个神奇的新显示值，该值实质上使容器消失，从而使该元素的子元素成为DOM中的下一层。

约<div class="container"> <figure> <img src="https://picsum.photos/id/600/600/300"> <figcaption> This is the description for the first image<br>another line </figcaption> </figure> <figure> <img src="https://picsum.photos/id/600/601/300"> <figcaption> This is the description for the second image </figcaption> </figure> </div>：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

HTML figure（带有可选标题的图形）元素表示独立的内容，可能带有可选标题，该内容是使用（<figure>）元素指定的。该图，其标题及其内容被引用为一个单元。

约<figcaption>：

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

通过@supports CSS规则，您可以指定依赖于浏览器对一个或多个特定CSS功能的支持的声明。这称为功能查询。规则可以放在代码或nested inside any other conditional group at-rule的顶层。

Answer 2

默认情况下，如果指定{{1}，则网格项将一个放在另一个网格的下方（按照网格项在标记中的显示顺序）。。您可以使用grid-template-columns: 1fr来描述第一张图片（grid-row: 2）-这样可以正确放置它。

请参见下面的演示

three

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.one img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.two img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.three {
  padding: 20px;
  background: wheat;
}

.four {
  padding: 20px;
  background: gray;
}

@media only screen and (max-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .three {
    grid-row: 2; /* added */
  }
}

Answer 3

一栏中的元素以出现在代码中的顺序显示。您尚未创建任何理由使其以任何其他顺序出现。

您可以重新排列HTML，以便它们按您的首选顺序显示。

或者，这是一种CSS方法-使用grid-template-areas-可能对您有用：

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
      grid-template-areas: "one two"
                          "three four";
}

.one   { grid-area: one; }
.two   { grid-area: two; }
.three { grid-area: three; }
.four  { grid-area: four; }

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.three {
  padding: 20px;
  background: wheat;
}

.four {
  padding: 20px;
  background: gray;
}

@media only screen and (max-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "one"
                         "three"
                         "two"
                         "four";
  }
}

<div class="container">
  <div class="one">
    <img src="https://picsum.photos/id/600/600/300">
  </div>
  <div class="two">
    <img src="https://picsum.photos/id/600/601/300">
  </div>
  <div class="three">
    This is the description for the first image
  </div>
  <div class="four">
    This is the description for the second image
  </div>
</div>

在较小的屏幕上更改网格项目的顺序

3 个答案: