好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？ 现在已经讨论过表vs divs/CSS的一般主题,例如:
DIV vs Table ; 和
表而不是DIV.
因此,这不是关于CSS与布局表格的一般性讨论.这只是一个问题的解决方案.我使用CSS尝试了以上的各种解决方案,包括:
浮动按钮或包含按钮的div;
相对于按钮的位置; 和
位置相对+绝对.
由于各种原因,这些解决方案都不令人满意.例如,相对定位导致z-index问题,其中我的下拉菜单出现在内容下.
所以我最终回到:
Title
而且效果很好.它很简单,因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用.没有搞乱定位或花车.
所以任何人都可以做没有表的等价物吗？
要求是:
向后兼容:到FF2和IE6;
合理一致:跨越不同的浏览器;
垂直居中:按钮和标题具有不同的高度; 和
灵活:允许合理精确控制定位(填充和/或边距)和样式.
在旁注中,我今天看到了几篇有趣的文章:
为什么CSS不应该用于布局 ; 和
表与CSS:CSS Trolls开始
编辑:让我详细说明浮动问题.这种作品:
Layout
This is my title
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.
So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?
On a side note, I came across a couple of interesting articles today:
感谢Ant P的overflow: hidden部分(虽然不知道为什么).这就是问题所在.说我希望标题和按钮垂直居中.这是有问题的,因为元素具有不同的高度.比较这个:
Layout
This is my title
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.
So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?
On a side note, I came across a couple of interesting articles today:
哪作得很好.
使用可用的工具快速正确地完成工作没有任何问题.
在这种情况下,表格工作得很好.
我个人本来会用这个表.
我认为应该避免使用嵌套表,事情会变得混乱.
只需向左和向右浮动并设置清除两者即可.不需要桌子.
编辑:我知道我得到了很多赞成票,我相信我是对的.但有些情况下你只需要有桌子.您可以尝试使用CSS做任何事情,它可以在现代浏览器中工作,但如果您希望支持较旧的...不要重复自己,这里是相关的堆栈溢出线程和我博客上的咆哮.
Edit2:由于旧的浏览器不再那么有趣了,我正在使用Twitter引导程序进行新项目.它适用于大多数布局需求并使用CSS.
这是一个棘手的问题:它看起来非常简单,直到你到达
说我希望标题和按钮垂直居中.
我想说明是的,CSS的垂直居中很难.当人们发帖,并且在SO上似乎无穷无尽时,"你能用CSS做X",答案几乎总是"是",他们的唠叨似乎是不合理的.在这种情况下,是的,一件特别的事情很难.
有人应该将整个问题编辑为"在CSS中垂直居中有问题吗？".
左边浮动标题,右边浮动按钮,(这是我最近才知道的部分) - 制作它们的容器{overflow:hidden}.
无论如何,这应该避免z-index问题.如果它不起作用,并且您确实需要IE5支持,请继续使用该表.
在纯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; }
但是在大多数情况下这是毫无意义的...如果您已经知道元素的高度,那么您可以使用浮点数并添加足够的余量来根据需要定位它们.
这是另一种方法,它使用文本基线将两列垂直对齐为内联块.这里的缺点是您需要为列设置固定宽度以从左边缘填充宽度.因为我们需要将元素锁定到文本基线,所以我们不能只使用float:right作为第二列.(相反,我们必须使第一列足够宽以推翻它.)
Layout
This is my title.
And it works perfectly, but mind the hacks.
HTML:我们在每列附近添加.valign包装器.(如果它让你更开心,给他们一个更"语义"的名字.)这些需要保持不间隔的空格,否则文本空间会将它们分开.(我知道它很糟糕,但这就是你用标记"纯粹"并将它与表示层分开所得到的......哈!)
CSS:我们使用vertical-align:middle将块排列到group-header元素的文本基线.每个块的不同高度将保持垂直居中并推出其容器的高度.需要计算元素的宽度以适合宽度.在这里,它们是400和100,减去它们的水平填充.
IE修复: Internet Explorer仅显示本机内联元素的内联块(例如span,而不是div).但是,如果我们给div hasLayout然后将其显示为内联,它的行为就像内联块一样.边距调整是在顶部修复1px间隙(尝试将背景颜色添加到.group-title中以查看).
京公网安备 11010802040832号 | 京ICP备19059560号-6 