向左飘浮; vs display:inline; vs display:inline-block; vs display:table-cell;

Question

我的问题

1. 这些方法中的任何一种都是专业网页设计师的首选吗？

2. 在绘制网站时,这些方法中的任何一种都是通过网络浏览器进行优化的吗？

3. 这只是个人偏好吗？

4. 还有其他我缺少的技术吗？

注意:以上问题涉及设计多列布局

---

向左飘浮;

http://jsfiddle.net/CDe6a/

这是我在创建列布局时总是使用的方法,它似乎工作得很好.虽然父母确实崩溃了,所以你只需要记住clear:both;以后.另一个骗子,我只是发现无法垂直对齐文本.

显示:内联;

这似乎纠正了折叠父级的问题,但增加了空格.

http://jsfiddle.net/CDe6a/1/

从html中删除空格似乎是最容易解决这个问题的方法,但如果你对你的html非常挑剔则不需要.

http://jsfiddle.net/CDe6a/2/

显示:内联块;

似乎表现得很像display:inline;.

http://jsfiddle.net/CDe6a/3/

显示:表细胞;

http://jsfiddle.net/CDe6a/4/

工作完美.

我的想法:

我确定我错过了很多东西,比如某些例外情况会破坏布局,但display:table-cell;似乎效果最好,我想我会开始更换,float:left;因为我似乎总是陷入困境clear:both;.我在网上看过很多关于这个的文章和博客,但没有一个能给我一个明确的答案,说明我在设置我的网站时应该使用什么.

Answer 1

您询问的选项有:

• float:left;
  我不喜欢浮动因为需要额外的标记来清除浮动.就我而言,整个float概念在CSS规范中设计得很差.我们现在无能为力.但重要的是它确实有效,它适用于所有浏览器(甚至是IE6/7),所以如果你喜欢它,请使用它.

如果使用:after选择器清除浮动,则可能不需要额外的清除标记,但如果要支持IE6或IE7,则不能选择此选项.

• display:inline;
  这不应该用于布局,IE6/7除外,其中display:inline; zoom:1是支持破坏支持的后备黑客inline-block.

• display:inline-block;
  这是我最喜欢的选择.它适用于所有浏览器,并且对IE6/7有一定的警告,它支持某些元素.但是请参阅上面的hacky解决方案来解决这个问题.

另一个值得注意的inline-block是,由于内联方面,元素之间的空白处理与文本单词之间的空白处理相同,因此可以在元素之间出现间隙.有一些解决方法,但没有一个是理想的.(最好的只是元素之间没有任何空格)

• display:table-cell;
  另一个你将遇到浏览器兼容性问题.较旧的IE将无法使用此功能.但即使对于其他浏览器,值得注意的table-cell是,它被设计用于内部元素的上下文中,这些元素被设计为table和table-row; 单独使用table-cell并不是预期的方法,因此您可能会遇到不同的浏览器.

您可能错过的其他技巧？是.

• 由于您说这是针对多列布局的,因此您可能需要了解CSS列功能.然而,它不是最受支持的功能(即使在IE9中也不支持IE,并且所有其他浏览器都需要供应商前缀),因此您可能不想使用它.但这是另一种选择,你确实问过.

• 还有CSS FlexBox功能,旨在让您从一个框到另一个框的文本流动.这是一个令人兴奋的功能,它将允许一些复杂的布局,但这仍然在开发中 - 请参阅http://html5please.com/#flexbox

希望有所帮助.

Answer 2

我通常使用float: left;和添加overflow: auto;来解决崩溃的父问题(至于为什么这样做,overflow: auto如果不给它显式高度,将扩展父级而不是添加滚动条,overflow: hidden也可以).我需要的大多数垂直对齐需要用于菜单栏中的单行文本,这可以使用line-height属性来解决.如果我真的需要垂直对齐一个块元素,我会在父元素和垂直对齐的项目上设置一个显式高度,绝对位置,前50%和负边距.

我没有使用的原因display: table-cell是当你有更多的项目比网站的宽度可以处理时溢出的方式.table-cell将强制用户水平滚动,而float将包裹溢出菜单,使其仍然可用而无需水平滚动.

关于float的最好的事情:左边和溢出:auto是它可以一直回到IE6,没有黑客攻击,甚至可能更进一步.

Answer 3

我会说这取决于你需要它:

1. 如果你需要它只是为了获得3列布局,我建议你这样做float.

2. 如果你需要菜单,你可以使用inline-block.对于空白问题,你可以使用Chris Coyier在http://css-tricks.com/fighting-the-space-between-inline-block-elements/中描述的一些技巧.

3. 如果你需要做一个多选项,宽度需要在指定的框内均匀分布,那我更喜欢display: table.这在某些浏览器中无法正常工作,因此取决于您的浏览器支持.

最后,可能最好的方法是使用flexbox.这个规格改变了几次,所以它还不稳定.但一旦完成,这将是我认为最好的方法.