手机端布局正常，电脑端却显示异常，如何解决？

电脑端布局正常，手机端访问失败，原因及解决办法

问题描述

编写了一段手机端布局，在电脑上调试时正常。然而，切换到手机访问时却出现异常，如下所示：

写入的html代码：

<table class="cards">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

登录后复制

错误情况：

在手机端，布局错位，第二个单元格（4）被挤出屏幕</p>

**原因分析和解决方案**

在移动端，表格中的单元格宽度默认占据 100%，而没有设置明确的宽度。解决方法是为单元格（`td`）设置明确的宽度。

出错的布局中还涉及到了一个 flex 布局问题。flex 属性被应用于 `.cards` 类上，但其作用范围只适用于 `table` 层级，不会延伸到 `tr` 和 `td` 层级。

**DOM 结构不显示的原因**

登录后复制

以上就是手机端布局正常，电脑端却显示异常，如何解决？的详细内容，更多请关注抖狐科技其它相关文章！