你可以做这个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/html与application/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 }
看演示
