你可以做这个HTML布局而不使用表?

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

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

很简单的东西。 事情是表仇恨似乎已经接pipe了networking世界,当我问为什么使用定义列表(DL,DD,DT)为HTML表单而不是表格的标签提醒我时, 先前已经讨论过表格vs div / CSS的主题,例如:

  • DIV与表 ; 和
  • 表格而不是DIV 。

所以这不是一个关于CSS和表格布局的一般性讨论。 这只是一个问题的解决scheme。 我尝试了以上使用CSS的各种解决scheme,包括:

  • 为button浮动或包含button的div;
  • 相对于button的位置; 和
  • 相对位置+绝对位置。

这些解决scheme都不能满足不同的原因。 例如,相对定位导致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;
  • 合理一致:跨越不同的浏览器;
  • 垂直居中:button和标题的高度不同; 和
  • 灵活:允许对定位(填充和/或边距)和造型进行合理的精确控制。

在旁注中,我今天遇到了一些有趣的文章:

  • 为什么CSS不应该用于布局 ; 和
  • 表与CSS:CSS巨人粗心大意

编辑:让我详细解释浮动问题。 这类作品:

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

感谢antP的overflow: hidden部分(仍然不明白为什么)。 问题出现在这里。假设我想让标题和button垂直居中。 这是有问题的,因为元素是不同的高度。 比较这个:

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

这完美的作品。

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

在这种情况下,桌子完美地工作。

我个人会用这个表。

我认为应该避免嵌套表,事情可能会变得混乱。

只是左右浮动,并设置清除两个,你就完成了。 不需要桌子。

编辑:我知道我有很多upvotes这个,我相信我是对的。 但有些情况下,你只需要有表格。 你可以尝试用CSS做所有事情,它可以在现代浏览器中工作,但是如果你想支持更老的…不要重复自己,这里的相关堆栈溢出线程和我的博客上的咆哮 。

编辑2:由于旧的浏览器不再有趣,我正在使用Twitter引导新项目。 这对于大多数布局需求是很好的,并且使用CSS。

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

说我想标题和button被垂直居中。

我想说的是,在CSS中垂直居中是困难的。 当人们发帖,似乎没完没了的时候,“你能用CSS来做X吗?”的答案几乎总是“是”,他们的哼声似乎是不合理的。 在这种情况下,是的,这是一件很难的事情。

有人应该将整个问题编辑为“在CSS中垂直居中问题?”。

浮动标题离开,浮动button权利,和(这是我从来不知道的部分,直到最近) – 使他们的容器都{overflow:hidden}

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

在纯粹的CSS,一个工作的答案将有一天只是使用"display:table-cell" 。 不幸的是,在目前的A级浏览器中不起作用,所以如果你只是想实现相同的结果,那么你也可以使用表格。 至less你可以肯定它在过去已经足够了。

老实说,只要使用一个表,如果它更容易。 它不会伤害。

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

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

我认为这需要一个超越XHTML 1.1的特殊的DTD,它将激起整个text/htmlapplication/xml争论,所以我们不要去那里。

所以,对你的无法解决的CSS问题…

要垂直alignment它们中心的两个元素:可以通过几种不同的方法来完成,有一些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; } 

但是,在大多数情况下,这是没有意义的。如果你已经知道元素的高度,那么你可以使用浮动,并添加足够的余量来定位它们。

这是另一种使用文本基线将两列作为内联块alignment的方法。 这里的缺点是你需要设置列的固定宽度来填充左边的宽度。 因为我们需要将元素locking在文本基线上,所以我们不能只在第二列使用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> 

HTML:我们在每列添加.valign包装器。 (给他们一个更“语义”的名字,如果让你更快乐)。这些需要保持没有空白之间,否则文本空间将推动他们分开。 (我知道这很糟糕,但这就是你得到的纯粹的标记,并从表示层分离出来…哈!)

CSS:我们使用vertical-align:middle将块vertical-align:middle到group-header元素的文本基线。 每个街区不同的高度将保持垂直居中,并推出他们的容器的高度。 元素的宽度需要根据宽度进行计算。 在这里,他们是400和100,减去他们的水平填充。

IE修补程序: Internet Explorer只显示本地内联元素的内联块(例如span,not div)。 但是,如果我们将div放在hasLayout中,然后将其显示为内联,则它的行为就像内联块一样。 边缘调整是为了在顶部固定一个1px的间隙(尝试添加背景颜色到.group-title来查看)。

我build议不要在这种情况下使用表,因为这不是表格数据; 这个button位于最右边是纯粹的表示。 这是我会做的复制你的表结构(改变到一个不同的H#,以适应你在你的网站的层次结构):

 <style> .group-header { background: yellow; zoom: 1; padding: 8px; } .group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* set width appropriately to allow room for button */ .group-header h3 { float: left; width: 300px; } /* set line-height or margins to align with h3 baseline or middle */ .group-header input { float: right; } </style> <div class="group-header"> <h3>This is my title</h3> <input type="button" value="Collapse"/> </div> 

如果你想在中间进行真正的垂直alignment(也就是说,如果文本包装的button仍然是中间alignment的两行文本),那么你需要做一个表或工作的position: absolute和利润率。 您可以添加position: relative对于您的下拉菜单(或更可能是其父),以便将其拉到与button相同的顺序级别,使您可以使用z-index将其置于上方,如果涉及到。

请注意,您不需要div width: 100% ,因为它是一个块级元素, zoom: 1使得div在IE中具有clearfix(其他浏览器选取实际的clearfix)。 你也不需要所有这些无关的类,如果你想更具体一点的东西,虽然你可能需要一个包装div或跨度的button,使定位更容易。

在一个div中做一个双浮点数并使用clearfix。 http://www.webtoolkit.info/css-clearfix.html你有任何填充/保证金限制?;

 <div class="clearfix"> <div style="float:left">Title</div> <input type="button" value="Button" style="float:right" /> </div> 
 <div class="group-header"> <input type="button" name="Button" value="Button" style="float:right" /> <span>Title</span> </div> 

我同意,应该只使用表格来表格数据,原因很简单,表格不显示“直到他们完成加载(不pipe速度多快,CSS方法慢)”。 不过,我确实认为这是最简单最优雅的解决scheme:

 <html><head><title>stack header</title> <style type="text/css"> #stackheader { background-color: #666; color: #FFF; width: 410px; height: 50px; } #title { color: #FFF; float: left; padding: 15px 0 0 15px; } #button { color: #FFF; float: right; padding: 15px 15px 0 0; } </style></head><body> <div id="stackheader"> <div id="title">Title</div> <div id="button">Button</div> </div> </body></html> 

buttonfunction和任何额外的细节可以从这个基本的forms风格。 对不好的标签抱歉。

我select使用弹性盒,因为它使事情变得更容易。
你基本上需要去你想alignment的孩子的父母,并添加显示:框(当然前缀)。 让他们坐在双方使用justify内容 。 如果你的元素需要alignment到最后,就像这种情况一样(见链接)…
然后vericalalignment的问题。 因为我制作了两个元素的父对象,您可以使用align-items:center来轻松alignment一个弹性框。 然后我添加了你想要的样式,删除标题中的浮动和button,并添加了填充。

  .group-header, .group-content { width: 500px; margin: 0 auto; } .group-header{ border: 1px solid red; background: yellow; overflow: hidden; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; padding: 8px 0; } .group-content{ border: 1px solid black; background: #DDD; } .group-title { padding-left: 8px; } .group-buttons { padding-right: 8px } 

看演示