如何根据浏览器 window 的宽度在 table 中将带有字幕的图像居中和重新排序？

Question

我的网站上有一个 2 列 table，其中包含图片和说明文字。我将单元格中的所有元素居中。我想更改 table 行中文本和图像的顺序，以便文本在左侧，图像在右侧，然后在下一行以相反的顺序排列。现在，我只是手动交换了项目。

当您从大屏幕观看时一切正常。但是如果你使用的是小屏幕，主要有两个问题：

我注意到在某些屏幕宽度下，一些图像会折叠成一列，而另一些则不会。 Here is a screenshot of what I mean.
主要问题是某些标题在小屏幕宽度的图像上方。这是因为图像和文本在一行中的交换顺序。但我想在大屏幕上保持这种状态。 Screenshot.

我想我在 CSS 中遗漏了一些东西。

我对 table 的期望：Screenshot。

那么，如果 table 中的任何行折叠，如何折叠它们？有什么好的方法可以连续排序吗？

我试过以下代码：

:root {
    --text-white: #fff;
    --table-image-width: 500px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
    line-height: 26px;
    font-family: "Times New Roman", serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    background-color: black;
    color: white;
    text-indent: 0;
    white-space: normal;
}

.section__article_center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.section-article__table {
    text-align: center;
    min-width: var(--table-image-width);
    width: 80%;
    border: 1px solid white;
    table-layout: auto;
}

.section-article__table img {
    width: var(--table-image-width);
}

.section-article__table tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.section-article__table td {
    border: 1px solid white;
    padding: 10px 40px;
    overflow: hidden;
    flex-grow: 1;
    flex-basis: auto;
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

<div class="section__article_center">
    <table class="section-article__table">
        <thead>Some photos</thead>
        <tbody>
            <tr>
                <td><img src="https://dudkomatt.github.io/Images/Random/1.jpg" alt="Some photo"></td>
                <td>Beautiful clouds</td>
            </tr>
            <tr>
                <td>Wet water</td>
                <td><img src="https://dudkomatt.github.io/Images/Random/2.jpg" alt="Some photo"></td>
            </tr>
        </tbody>
    </table>
</div>

JSFiddle 上的相同代码：https://jsfiddle.net/indefinite_person/o1my5rfp/1/

Answer 1

如果你想改变 flexbox 中元素的顺序，你可以使用 order 属性。可以找到更多信息 here。从本质上讲，它的工作原理是在要放置在不同位置的元素上使用属性。

在您的情况下，您只想在屏幕变得太小时更改元素的顺序。您将需要使用媒体查询。然后您可以在媒体查询中设置其中一张图片的顺序。

Answer 2

我建议您不要为此使用表格。表格非常适合在固定位置显示数据，但不是很灵活，不应该用作样式工具。

A <figure> with an <img> and <figcaption> will be more semantic. Then you could style these <figure> elements with Flexbox and specifically the order 属性来定位您的图片和文字。

按照您的移动设计顺序放置图片和标题。这是基础。然后使用媒体查询 flex-direction 和 order 属性，更改图像和标题的布局和顺序。

在下面的代码片段中，我演示了它的外观和工作原理。试试吧。

:root {
    --text-white: #fff;
    --table-image-width: 200px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    font-family: "Times New Roman", serif;
    background-color: black;
    color: white;
}

.section__article_center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.section__article_center figure {
  display: flex;
  flex-direction: column;
  border: 1px solid white;
  margin: 0;
}

.section__article_center figure :is(figcaption, img) {
  padding: 40px;
}

.section__article_center figure figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid white;
  width: 200px;
}

.section__article_center figure img {
  width: var(--table-image-width);
}

@media screen and (min-width: 32em) { /* 480px */
  .section__article_center figure {
    flex-direction: row;
    align-items: stretch;
  }
  
  .section__article_center figure:nth-child(odd) figcaption,
  .section__article_center figure:nth-child(even) img {
    order: 0;
  }

  .section__article_center figure:nth-child(even) figcaption,
  .section__article_center figure:nth-child(odd) img {
    order: 1;
  }
  
  .section__article_center figure figcaption {
    border-top: none;
  }
  
  .section__article_center figure:nth-child(even) figcaption {
    border-left: 1px solid #ffffff;
  }
  
  .section__article_center figure:nth-child(odd) figcaption {
    border-right: 1px solid #ffffff;
  }
}

<div class="section__article_center">
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/1.jpg" alt="Some photo">
    <figcaption>Beautiful clouds</figcaption>
  </figure>
  
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/2.jpg" alt="Some photo">
    <figcaption>Wet water</figcaption>
  </figure>
  
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/1.jpg" alt="Some photo">
    <figcaption>Beautiful clouds</figcaption>
  </figure>
  
  <figure>
    <img src="https://dudkomatt.github.io/Images/Random/2.jpg" alt="Some photo">
    <figcaption>Wet water</figcaption>
  </figure>
</div>

如何根据浏览器 window 的宽度在 table 中将带有字幕的图像居中和重新排序？

How to center and reorder images with captions in the table depending on the width of the browser window?

html

javascript

css

css-selectors