Таблица CSS различный порядок ячеек на разных размерах экрана - PullRequest
Новая
       13

Таблица CSS различный порядок ячеек на разных размерах экрана

0 голосов
/ 11 октября 2019

Я пытаюсь создать таблицу из двух столбцов, чередуя текст и изображение. Текст и изображение каждой строки связаны друг с другом. У меня уже работает эта часть.

Проблема в том, что когда он на телефоне, порядок становится 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>

1 Ответ

1 голос
/ 11 октября 2019

вы можете использовать flex и figure вместо html таблицы

возможный пример:

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>

Вот несколько прочтений помимо ответа:

...