html - 将两个相互堆叠

Question

我目前正在努力使网站具有响应性，但问题是，我需要在不触及页面内容的情况下使其具有响应性。所以页面上的一切都保持不变，但我希望使用新的样式表和一点 Javascript（但主要是 CSS）来完成这项任务。

该网站主要由表格组成。因此，当调整浏览器的大小（或使用移动设备访问）时，我希望我的“tr”中的第二个“td”堆叠在第一个下方，而不是两者相邻.

我给 'td' 元素一个左浮动和 100% 的宽度，它在 Firefox 中运行良好，但在 Chrome 和 Safari 中，'td' 都是 50% 并且在同一行。

如果您有任何想法，请告诉我，不胜感激！

score 37 · Accepted Answer

使用display:block在您tr td的适应布局。

tr td {
  padding: 20px 40px;
  border: 1px solid black;
  display: block;
}

<table>
  <tr>
    <td>Damn</td>
    <td>This</td>
    <td>Table</td>
    <td>Layout</td>
  </tr>
</table>

score 5 · Accepted Answer

尝试使用 CSS 更改显示，使其转到另一行：

td {
  display: block;
  clear:both;
}

score 1 · Accepted Answer

您尝试做的事情要么不起作用，要么让您头疼。表格不是为响应式设计而设计的。如果你说你不能触摸代码，那么你就非常卡住了。解决这个问题的最佳方法是重写代码并在相关的地方用 DIV、Ps 等替换任何表，并使用 CSS、jquery 和媒体查询来使您的网站响应。

当前，您可以尝试使站点响应的唯一方法是在页面加载时使用 jquery 将所有表替换为 DIV、Ps 等，然后继续使用 CSS、jquery 和媒体查询来尝试使站点响应。这不是推荐的方法，我什至不能保证这会 100% 工作。

score 0 · Accepted Answer

您是否尝试过div在表格单元格中放置两个 s 并在其float left上放置 a 。当桌子倒塌时，它们应该堆叠起来。

score 0 · Accepted Answer

听起来您正在使用表格进行布局而不是表格数据。表格只能用于表格数据。

您需要改为使用分组内容；更具体地说，div元素：

<div>
    <div>Top</div>
    <div>Bottom</div>
</div>

值得注意的是，根据顶部和底部容器中存在的内容类型，您可能希望完全使用不同的元素。

score 0 · Accepted Answer

0

另一种可能性是将政府网站嵌套在一个iframe.

于 2013-03-22T13:14:10.337 回答

6 回答 6