html - 如何使双列表响应第二列在第一列之下？

Question

我正在使用在线编辑器创建网站。我有一个包含两列和一行的简单表格。在桌面上，它看起来不错，但在移动设备上，我必须左右滚动才能看到内容。

我想让它在小屏幕上的第一列下方的第二列响应。

这是我的代码:

<div style="overflow-x: auto;">
  <table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;">
    <tbody>
      <tr style="height: 143.6px;">
        <td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
        <td style="width: 439px; height: 143.6px;">
          <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
          <br />
          <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

所以在这个例子中，我希望文本部分在小屏幕上位于图片下方。请问我该怎么做？

谢谢大家!

Answer 1

您可以使用应用 display: block; 的媒体查询。宽度:100%； height: auto; 到 table、tr 和 td。这样你就可以让它们成为所有常规 block 元素，其中 td 将在彼此下方流动。

根据需要设置断点。在我的代码片段中，我将其设置为 600px；

并尽量避免内联样式。如果您想使用媒体查询，它们确实会妨碍您...

html, body {
margin: 0;
}
table {
  height: 452px;
  width: 821px;
  margin-left: auto;
  margin-right: auto;
}
tr {
height: 143.6px;
}
td.x {
  width: 280px;
  height: 143.6px;
}

td.y {
  width: 439px;
  height: 143.6px;
}

@media screen and (max-width: 600px) {
  table,
  tr,
  td.x,
  td.y {
    display: block;
    width: 100%;
    height: auto;
  }
}

<div style="overflow-x: auto;">
  <table>
    <tbody>
      <tr>
        <td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
        <td class="y">
          <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
          <br />
          <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>