您可以在不使用表格的情况下进行HTML布局吗？

一尘不染

您可以在不使用表格的情况下进行HTML布局吗？

css

好的，我在一两个星期前遇到了一个简单的布局问题。即页面的各个部分需要一个标题：

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

很简单的东西。在网络世界中，表仇恨似乎已经接管了一切，当我问[为什么对HTML表单而不是表使用定义列表（DL，DD，DT）标签]时，我想起了这件事。现在，前面已经讨论了表vsdivs / CSS的一般主题

因此，这并不是要对CSS与布局表进行一般性讨论。这只是解决一个问题的方法。我使用CSS尝试了上述各种解决方案，包括：

向右浮动按钮或包含按钮的div；
按钮的相对位置；和
相对位置+绝对位置。

这些解决方案均因不同原因而不能令人满意。例如，相对位置导致z-index问题，其中我的下拉菜单出现在内容下方。

所以我最后回到了：

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

而且效果很好。这很简单，因为它具有向后兼容性（即使在IE5上也可以使用），并且可以正常工作。不要乱搞定位或浮动。

因此，没有表，谁能做到这一点？

要求是：

向后兼容： 到FF2和IE6；
合理一致： 跨不同的浏览器；
垂直居中： 按钮和标题的高度不同；和
灵活： 可以对定位（填充和/或边距）和样式进行合理精确的控制。

编辑： 让我详细说明浮动问题。这类作品：

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { float: left; padding: 8px; }
      .group-buttons { float: right; padding: 8px; }
    </style>
  </head>
  <body>
    <div class="group-header">
      <div class="group-title">This is my title</div>
      <div class="group-buttons"><input type="button" value="Collapse"></div>
    </div>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

多亏了Ant P的帮助overflow:hidden（尽管还是不明白为什么）。这就是问题所在。例如，我希望标题和按钮垂直居中。这是有问题的，因为元件具有不同的高度。比较一下：

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-header td { vertical-align: middle; }
      .group-title { padding: 8px; }
      .group-buttons { text-align: right; }
    </style>
  </head>
  <body>
    <table class="group-header">
    <tr>
      <td class="group-title">This is my title</td>
      <td class="group-buttons"><input type="button" value="Collapse"></td>
    </tr>
    </table>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

完美地运作。

阅读 299

2020-05-16

共1个答案

一尘不染

使用可用的工具快速正确地完成工作没有任何问题。

在这种情况下，一张桌子工作完美。

我个人会为此使用一张桌子。

我认为应避免使用嵌套表，否则可能会导致混乱。

2020-05-16