Question

我在网上看到过很多关于将表转换为div的例子，到目前为止没有一个帮助过。这就是我想要完成的......

到目前为止，我有以下代码。我在这个例子中排除了CSS样式表。

<table class="sh1">
  <tr>
    <th rowspan=2>
      <a class="sh2" href="/"><span></span>homepage link</a>
    </th>
    <th class="sh3">
      <a href="#stc">[Skip to Content]</a>
    </th>
  </tr>
  <tr>
    <td class="sh5">a description</td>
  </tr>
</table>

基本上，会发生的情况是，span标签最终会加载徽标，而“主页链接”字样会以白色显示在其下方。 “跳至内容”文本显示在右上方，“描述”文本显示在中间居中，这正是我想要的。

问题是我需要进一步缩小此代码，以便网站加载速度更快。我认为使用div很好但我觉得我有一个问题可以解决得非常容易但答案只是让我感到不舒服。

这是我尝试失败的代码：

<div class="ptop">
  <a href="/"><div></div>homepage link</a>
  <p>a description</p>
</div>

我有一个问题是在死点和标志的右边直接显示“描述”（现在位于DIV的内部集合中），但我可以用桌子完美地完成它。 / p>

所以基本上，我要问的是，如何在左侧获得一个带有链接的图像，并直接在其右侧显示文本而不进入下一行，并将所有这些视为标题？

我希望能够制作出可以与尽可能多的浏览器一起使用的解决方案。即使是适用于IE6的漂亮解决方案也不错。

Answer 1

不同寻常的是你不会包含你的CSS，因为大部分内容都可能会完成。

这是一个小提琴，有一种可能的方式：http://jsfiddle.net/g8dg5o2e/

如果您将徽标及其旁边的div设置为display:inline-block，则它们会出现在一行中。然后，如果您设置vertical-align:top，则可以使用说明文字中的line-height将其垂直居中放置在图片旁边。

重要的是行高与图像的高度相同，当然这并没有考虑到你在这里可能没有提供的任何其他CSS。

将此表转换为极简主义div

1 个答案: