Question

这是我正在处理的页面： https://glutenfreetravelsite.com/mobile/Rhode-Island/Providence/gluten-free-restaurant/Kabob-and-Curry/3795.php

在网络浏览器和移动设备上看起来很棒，页面的第一部分很好。但是当向下滚动到第二条评论时，评论内容不适合屏幕的宽度。

我查看了html，并比较了第一篇评论和第二篇评论的html。我不知道为什么第二条评论显示不正确。

我了解html较旧并且不符合当前标准。但是，我的目的是使它与当前存在的html一起正确显示。我确定某个地方一定没有，或标记，但无法弄清楚。谁能看到我需要修复的标签？

我没有包含该页面的源代码，因为我认为右键单击该页面会更容易查看它。

任何帮助将不胜感激！

谢谢

蒂姆

Answer 1

您将第二段放在表中。我认为这是主要问题。尝试将段落放在桌子外面。但是，如果仍然要在其中放置段落，则应添加CSS代码以使表具有响应能力。尝试以下代码：

@media
  only screen 
and (max-width: 760px), (min-device-width: 768px) 
and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

tr {
  margin: 0 0 1rem 0;
}

    td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100

在移动设备上查看网页-仅上半部分显示正确？

1 个答案: