0

http://weknowwhatyouredoing.com/

我正在尝试制作一个像这样的表格，其中左侧有个人资料图片，粗体标题/名称和粗体标题/名称下方的文本，以及下方的日期/时间戳......基本上与在那个网站 (http://weknowwhatyouredoing.com/) 或更好的网站（或推特推文）上。

有人知道有关如何完成此操作的任何教程吗？我目前正在使用具有多列的表格，但似乎当一个单元格很大时，该行中的所有单元格都变成相同的高度，我不喜欢这样。在 android 中，这被称为列表视图，但我不确定它在 html/css 世界中是什么，有什么帮助吗？提前致谢

4

5 回答 5

2

您可以使多个表格彼此相邻浮动。您展示的网站上的元素并没有像我所说的那样对齐。

可以在此处找到有关 rowspan 和 colspan 的教程。

如果您使图像跨越 3 行，您可以将粗体文本、内容和日期戳各放在一行中。如果行变得高于内容，您可以使用valign在行中垂直定位元素。如果 3 行加在一起高于包含图像的一个跨行，则可能会发生这种情况。

于 2012-08-08T13:56:30.580 回答
0

作为行高相等的问题的快速解决方案，您可以使用与weknowwhatyouredoing.com上使用的相同的布局方法。

将每列包裹在一个单独的<div>中，然后将您的<table>放在里面。

4 个容器，4 个具有独立行高的桌子。

于 2012-08-08T13:56:50.877 回答
0

为什么不使用多个列表元素？表格绝对不会为您提供响应式设计的灵活性。可以根据需要在有限的限制下重新排列多列列表元素

于 2012-08-08T14:19:27.910 回答
0

你应该看看 Twitter Bootstrap CSS 库Twitter Bootstrap 它是纯 HTML5/CSS，只使用 div。

于 2012-08-08T14:00:48.950 回答
0

为了提高您的 HTML 知识，您可以查看 W3C（Word Wibe Web Consortium）规范。例如，如果您看到此页面，W3C 解释了 Table 元素的所有结构、属性。

您可以在 google 中找到很多教程（搜索“tutorial create Table HTML”）。

此外，您可以使用在特定网站中显示悬停元素的浏览器插件来帮助您了解网站结构。（ Firefox 和 Chrome 的firebug，Opera 浏览器的 Dragonfly...）

于 2012-08-08T14:01:31.237 回答