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

Question

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

好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:

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

Run Code Online (Sandbox Code Playgroud)

非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？现在已经讨论过表vs divs/CSS的一般主题,例如:

DIV vs Table ; 和
表而不是DIV.

因此,这不是关于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>

Run Code Online (Sandbox Code Playgroud)

而且效果很好.它很简单,因为它具有向后兼容性(即使在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>

Run Code Online (Sandbox Code Playgroud)

感谢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>

Run Code Online (Sandbox Code Playgroud)

哪作得很好.

Answer 1

Gre*_*ndt 49

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

在这种情况下,表格工作得很好.

我个人本来会用这个表.

我认为应该避免使用嵌套表,事情会变得混乱.

他们可能不是,但他们正在为数以万计的用户提供解决方案. (31认同)
这个反表模因只是简单的老傻.基于灵活约束的laout的唯一二维布局管理器是table; 并且它是否只是一个复杂的(具有无数的col/rowspans),或嵌套的那些几乎没有区别.但现实和事实似乎并不总是足以反对狂热的武器. (22认同)
除非你使用表格来表示布局而不是表格数据,因为它最初很容易变得苍白,在这种情况下你会走向一条黑暗而危险的道路. (21认同)
亚马逊,现在stackoverflow都不是网页设计的顶峰. (11认同)
甚至亚马逊在某些情况下使用表格.而stackoverflow.com也是如此.当他们真正运作良好时,我全都是css解决方案. (9认同)

Answer 2

Mil*_*kov 27

只需向左和向右浮动并设置清除两者即可.不需要桌子.

编辑:我知道我得到了很多赞成票,我相信我是对的.但有些情况下你只需要有桌子.您可以尝试使用CSS做任何事情,它可以在现代浏览器中工作,但如果您希望支持较旧的...不要重复自己,这里是相关的堆栈溢出线程和我博客上的咆哮.

Edit2:由于旧的浏览器不再那么有趣了,我正在使用Twitter引导程序进行新项目.它适用于大多数布局需求并使用CSS.

不处理垂直居中,所以-1. (2认同)

Answer 3

Amb*_*pel 17

这是一个棘手的问题:它看起来非常简单,直到你到达

说我希望标题和按钮垂直居中.

我想说明是的,CSS的垂直居中很难.当人们发帖,并且在SO上似乎无穷无尽时,"你能用CSS做X",答案几乎总是"是",他们的唠叨似乎是不合理的.在这种情况下,是的,一件特别的事情很难.

有人应该将整个问题编辑为"在CSS中垂直居中有问题吗？".

这就是我对"桌面仇恨者"这个问题的一个问题:CSS可以做表所能做的所有事情......除了一些非常简单,常见和合理的情况(比如垂直居中).CSS看起来似乎是选举承诺变坏了. (11认同)
我的观点是垂直居中只是唯一真正困难的事情. (4认同)
CSS并不意味着替换表格; 它只是为了让您在没有表的情况下解决大多数常见的布局问题.如果桌子有效,请使用桌子,就像使用钢笔绘制而不是大锤一样. (3认同)

Answer 4

小智 16

左边浮动标题,右边浮动按钮,(这是我最近才知道的部分) - 制作它们的容器{overflow:hidden}.

无论如何,这应该避免z-index问题.如果它不起作用,并且您确实需要IE5支持,请继续使用该表.

"溢出:隐藏"是一个黑客,以达到高度'扩展'和清除.以下元素将清除该框(至少在正确实现规范部分的浏览器中). (2认同)

Answer 5

And*_*Vit 7

在纯CSS中,有一天工作的答案就是使用"display:table-cell".不幸的是,这在当前的A级浏览器中不起作用,所以对于所有这些,如果您只是想要获得相同的结果,也可以使用表.至少你会确定它在过去的工作中已经足够了.

老实说,如果它更容易,只需使用一张桌子.它不会受伤.

如果表元素的语义和可访问性对您来说真的很重要,那么有一个工作草案可以使您的表非语义化:

http://www.w3.org/TR/wai-aria/#presentation

我认为这需要一个超越XHTML 1.1的特殊DTD,这只会激起整个text/html与application/xml辩论,所以我们不要去那里.

那么,关于你未解决的CSS问题......

要在它们的中心垂直对齐两个元素:它可以通过几种不同的方式完成,有一些钝的CSS hackery.

如果您能够满足以下约束条件,那么有一种相对简单的方法:

两个元素的高度是固定的.
容器的高度是固定的.
元素将足够窄以不重叠(或可以设置为固定宽度).

然后你可以使用带有负边距的绝对定位:

.group-header { height: 50px; position: relative; }
.group-title, .group-buttons { position: absolute; top: 50%; }
# Assuming the height of .group-title is a known 34px
.group-title { left: 0; margin-top: -17px; }
# Assuming the height of .group-buttons is a known 38px
.group-buttons { right: 0; margin-top: -19px; }

Run Code Online (Sandbox Code Playgroud)

但是在大多数情况下这是毫无意义的...如果您已经知道元素的高度,那么您可以使用浮点数并添加足够的余量来根据需要定位它们.

这是另一种方法,它使用文本基线将两列垂直对齐为内联块.这里的缺点是您需要为列设置固定宽度以从左边缘填充宽度.因为我们需要将元素锁定到文本基线,所以我们不能只使用float:right作为第二列.(相反,我们必须使第一列足够宽以推翻它.)

<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; }
      .valign { display: inline-block; vertical-align: middle; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { padding: 8px; width: 384px; }
      .group-buttons { padding: 8px; width: 84px; text-align: right; }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
      .valign { display: inline; margin-top: -2px; padding-top: 1px; }
    </style>
    <![endif]-->
  </head>
  <body>
    <div class="group-header">
      <div class="valign">
        <div class="group-title">This is my title.</div>
      </div><!-- avoid whitespace between these! --><div class="valign">
        <div class="group-buttons"><input type="button" value="Collapse"></div>
      </div>
    </div>
    <div class="group-content">
      <p>And it works perfectly, but mind the hacks.</p>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

HTML:我们在每列附近添加.valign包装器.(如果它让你更开心,给他们一个更"语义"的名字.)这些需要保持不间隔的空格,否则文本空间会将它们分开.(我知道它很糟糕,但这就是你用标记"纯粹"并将它与表示层分开所得到的......哈!)

CSS:我们使用vertical-align:middle将块排列到group-header元素的文本基线.每个块的不同高度将保持垂直居中并推出其容器的高度.需要计算元素的宽度以适合宽度.在这里,它们是400和100,减去它们的水平填充.

IE修复: Internet Explorer仅显示本机内联元素的内联块(例如span,而不是div).但是,如果我们给div hasLayout然后将其显示为内联,它的行为就像内联块一样.边距调整是在顶部修复1px间隙(尝试将背景颜色添加到.group-title中以查看).

归档时间：	16 年，7 月前
查看次数：	62027 次
最近记录：	6 年，1 月前