html - 在 CSS 中排序大小不等的元素

Question

我正在尝试制作一个布局，其中不均匀大小的元素在桌面上将是“1 - 2 / 3 - 4”，并在移动设备上堆叠一个。我试过用花车做到这一点，我部分在那里。但是，元素 2 和 4 之间的差距太大了......有没有办法以某种方式减少这种情况，也许可以用其他方法？

请检查整页预览，非常感谢您的任何输入！

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

section {
 
}

section:nth-child(odd) {
  float: left;
  width: 66%;
}

section:nth-child(even) {
  float: right;
  width: 33%;
}

footer {
  clear: both;
}

@media(max-width: 992px) {
section:nth-child(odd) {
  float: none;
  width: 100%;
}

section:nth-child(even) {
  float: none;
  width: 100%;
}
}

<div class="wrap">
    <section class="test1">
      <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod?
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam.
      
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore?
      
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
    </section>
      <section class="test2">
      <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
      <section class="test3">
      <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
      <section class="test4">
      <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
</div>

<footer>
  footer
</footer>

标签： htmlcsslayoutflexboxcss-selectors

Answer 1

如果您可以使用网格并更改 html 元素的起始顺序，则可以使它们在桌面上按您想要的方式堆叠，然后使用媒体查询更改为 flex 并使它们具有 100% 宽度并为移动设备正确排序

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

.wrap {
  display: grid;
  grid-template-columns: 66% 33%;
  column-gap: 1%;
}

@media(max-width: 992px) {
  .wrap {
    display: flex;
    flex-wrap: wrap;
  }
  .column {
    display: contents;
  }
  section {
    width: 100%;
  }
  .test1 {
    order: 1;
  }
  .test2 {
    order: 2;
  }
  .test3 {
    order: 3;
  }
  .test4 {
    order: 4;
  }
}

*/

<div class="wrap">
  <div class="column">
    <section class="test1">
      <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
      dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
      elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
      fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
      perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
    </section>
    <section class="test3">
      <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
  <div class="column">
    <section class="test2">
      <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
    <section class="test4">
      <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
</div>

<footer>
  footer
</footer>

我猜你不需要网格，可以使用 flex：

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

.wrap {
  display: flex;
  justify-content: space-between;
}

.column:first-child {
  width: 66%;
}

.column:last-child {
  width: 33%;
}

@media(max-width: 992px) {
  .wrap {
    flex-wrap: wrap;
  }
  .column {
    display: contents;
    width: 100%;
  }
  section {
    width: 100%;
  }
  .test1 {
    order: 1;
  }
  .test2 {
    order: 2;
  }
  .test3 {
    order: 3;
  }
  .test4 {
    order: 4;
  }
}

*/

<div class="wrap">
  <div class="column">
    <section class="test1">
      <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
      dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
      elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
      fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
      perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
    </section>
    <section class="test3">
      <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
  <div class="column">
    <section class="test2">
      <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
    <section class="test4">
      <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
</div>

<footer>
  footer
</footer>