html - CSS Table 在不同屏幕尺寸下的不同单元格顺序

Question

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

问题是当它在手机上时，顺序变成了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>

Answer 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>

除了答案之外还有一些读物:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

• http://html5doctor.com/the-figure-figcaption-elements/