Question

我的网格布局是几个副本块，附带图像（link to jsfiddle）。

<div class="story-body">

    <div class="body-copy">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
    </div>

    <div class="regular-photo">
         <img src="http://placehold.it/500x500">
    </div>


    <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
    </div>

    <div class="regular-photo">
         <img src="http://placehold.it/500x500">
    </div>

</div>

它完美地显示在桌面上 - 图像排列在随附副本块顶部的旁边。问题是，在移动设备上，图像显示在正文复制部分之后，这是有道理的，考虑到我以这种方式组织HTML。

.story-body {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row;
}

.body-copy {
    justify-self: center;
    max-width: 80%;
}

.regular-photo {
justify-self: left;
}

@media screen and (max-width: 500px) {
    .story-body {
    grid-template-columns: 100%;
    }
    .regular-photo {
    justify-self: center;
    }
}

有没有办法在移动设备.regular-photo div之前定位.body-copy div而无需重新组织HTML？

Answer 1

您可以明确声明grid-template-areas并相应地放置每个div。

fiddle

.story-body {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-auto-flow: row;
    }
    
    .body-copy {
      justify-self: center;
      max-width: 80%;
    }
    
    .regular-photo {
      justify-self: left;
    }
    
    @media screen and (max-width: 500px) {
      .story-body {
        grid-template-columns: 100%;
        grid-template-areas: "image" 
                             "text"
                             "image2"
                             "text2";
      }
      
      .regular-photo {
        justify-self: center;
      }
      
      .story-body > div:nth-of-type(1) {
        grid-area: text;
      }
      .story-body > div:nth-of-type(2) {
        grid-area: image;
      }
      .story-body > div:nth-of-type(3) {
        grid-area: text2;
      }
      .story-body > div:nth-of-type(4) {
        grid-area: image2;
      }
    }

<div class="story-body">
  <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
      elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  </div>
  <div class="regular-photo">
    <img src="http://placehold.it/500x500">
  </div>

  <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
      elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  </div>
  <div class="regular-photo">
    <img src="http://placehold.it/500x500">
  </div>
</div>

Answer 2

我对你的代码进行了一些重构。劳驾。但这是解决方案。您可以将order property与包含display: grid

的班级的孩子一起使用

.story-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  justify-self: center;
}

.story-body p {
  justify-self: center;
  max-width: 80%;
}

.regular-photo {
  justify-self: left;
  display: inline-block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 500px) {
  .story-body {
    grid-template-columns: 1fr;
  }
  .photo1 {
    order: 1;
  }
  .p1 {
    order: 2;
  }
  .photo2 {
    order: 3;
  }
  .p2 {
    order: 4;
  }
}

<div class="story-body">
  <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
    elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  <div class="regular-photo photo1">
    <img src="http://placehold.it/500x500">
  </div>

  <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
    elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  <div class="regular-photo photo2">
    <img src="http://placehold.it/500x500">
  </div>
</div>

使用CSS Grid在移动设备上重新定位div

2 个答案: