CSS表格在不同屏幕尺寸下的不同单元格顺序答案

【问题标题】：CSS Table different cell order in different screen sizesCSS表格在不同屏幕尺寸下的不同单元格顺序
【发布时间】：2020-02-09 08:19:22
【问题描述】：

我正在尝试创建一个包含两列的表格，在文本和图片之间交替。每一行的文字和图片都是相互关联的。我已经让那部分工作了。

问题是当它在手机上时，顺序变为 text1-picture1-picture2-text2-text3-picture3-picture4-...

在一定的屏幕尺寸下，有没有办法让事物的顺序不同（意思是text1-picture1-text2-picture2-text3...）？

.squish {
  padding-left: 10%;
  padding-right: 10%;
}

@media only screen and (max-width: 1000px) {
  .squish {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.squishTable {
  padding-left: 10%;
  padding-right: 10%;
}

table,
td {
  border: 0px solid #000;
}

table {
  width: 100%;
}

td {
  width: 33.33%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  display: table-cell;
}

@media screen and (max-width:1000px) {
  table tr>* {
    display: block;
  }
  table tr {
    display: table-cell;
  }
}

@media only screen and (max-width: 1000px) {
  .squishTable {
    padding-left: 5%;
    padding-right: 5%;
  }
  td {
    width: 100%;
  }
}

<div class="squishTable">
  <table>
    <tbody>
      <tr>
        <td>
          Text1
        </td>
        <td>
          Image1
        </td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>
          Image2
        </td>
        <td>
          Text2
        </td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>
          Text3
        </td>
        <td>
          Image3
        </td>
      </tr>
    </tbody>
  </table>

【问题讨论】：

由于您没有将此表用于表格数据（交替顺序不是标准格式，因为列标题不起作用），我会切换到弹性框网格，它可以让您很好地控制超额订购。

标签： html css html-table responsive-design

【解决方案1】：

你可以使用 flex 和 figure 代替 html table

可能的例子：

figure {
  display: flex;
  margin: 0;
  align-items: center;
}

figure:nth-child(even) {
  flex-direction: row-reverse
}

img,
figcaption {
  flex: 1 0 auto;
  margin: 2px;
}

body {
  margin: 0;
}

<div class="squeed">
  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

或

figure {
  display: flex;
  margin: 0;
  align-items: center;
}

figure:nth-child(even) {
  flex-direction: row-reverse
}

img,
figcaption {
  flex: 1;
  margin: 2px;
}

body {
  margin: 0;
}

<div class="squeed">
  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/200x100/09f">
    <figcaption>
      <h1>HTML Ipsum Presents</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </figcaption>
  </figure>

除了答案之外，还有一些读数：

【讨论】：