浮:左;与显示:内联;与显示:inline-block;与显示:表格单元;

我的问题(s)

  1. 这些方法是专业网页设计师的首选吗?

  2. 在绘制网站时，这些方法中有任何一种是浏览器首选的吗?

  3. 这只是个人喜好吗?

  4. 我还遗漏了其他技巧吗?

注意:以上问题是关于设计多栏布局的

浮:左;

http://jsfiddle.net/CDe6a/

float:left image

这是我在创建列布局时经常使用的方法，它似乎工作得很好。但是父对象本身会崩溃，所以你只需要记住之后clear:both;。另一个反对，我刚刚发现的是无法垂直对齐文本。

显示:内联;

这似乎纠正了父节点折叠的问题，但增加了空白。

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

display:inline image

从html中删除空白似乎是解决这个问题的最简单的方法，但如果你真的对你的html很挑剔，这是不可取的。

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

no html whitespace image

显示:inline-block;

似乎行为完全像display:inline;。

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

display:inline-block image

显示:表格单元;

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

display:table-cell image

完美的工作。

我的想法:

我确信我错过了大量的东西，像某些异常，将打破布局，但是，display:table-cell;似乎工作得最好，我想我将开始替换float:left;，因为我总是在clear:both;上搞砸。我在网上读过很多关于这方面的文章和博客，但没有一篇给我一个明确的答案，告诉我在布局我的网站时应该使用什么。

142105 次浏览
小开

我更喜欢内联块，尽管浮动也很有用。旧ie不能正确地渲染表单元格(内联块也不行，但有我经常使用的zoom: 1; *display: inline hack)。如果你的子节点的高度小于父节点的高度，浮动会把它们带到顶部，而内联块有时会搞砸。

大多数情况下，浏览器会正确地解释所有内容，当然，除非它是IE。你总是要检查以确保IE不会糟糕——例如，表格单元格的概念。

在所有现实中，是的，这归结为个人偏好。

一种可以用来消除空白的技术是将font-size设置为0给父对象，然后将font-size返回给子对象，尽管这很麻烦，而且很恶心。

小开

我认为这取决于你需要它做什么:

  1. 如果你需要它只是为了得到3列布局，我建议用float。

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

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

最后，可能最好的方法是使用flexbox。这个规范已经改变了几次，所以它还不稳定。但一旦最终确定，这将是我认为最好的方法。

小开

我通常使用float: left;并将overflow: auto;添加到解决崩溃的父级问题(至于为什么这样做，如果你没有显式地给它高度，overflow: auto将展开父元素而不是添加滚动条，overflow: hidden也可以)。我的大部分垂直对齐需求是菜单栏中的一行文本，这可以使用line-height属性来解决。如果我真的需要垂直对齐一个块元素，我将在父元素和垂直对齐的元素上显式设置高度、绝对位置、顶部50%和负边距。

我不使用display: table-cell的原因是，当你有超过网站宽度可以处理的项目时，它会溢出。Table-cell将强制用户水平滚动，而float将包装溢出菜单，使其在不需要水平滚动的情况下仍然可用。

关于float: left和overflow: auto最好的一点是，它可以一直工作到IE6，而不需要任何修改，甚至可能更久。

enter image description here

小开
最佳答案

在你问的选项中:

    <李> float:left;
    我不喜欢浮动，因为需要有额外的标记来清除浮动。就我而言，整个float概念在CSS规范中设计得很糟糕。但我们现在对此无能为力。但重要的是它确实可以工作，并且它可以在所有浏览器(甚至IE6/7)中工作，所以如果你喜欢它就使用它

如果您使用:after选择器清除浮点数，则可能没有必要使用额外的清除标记，但如果您希望支持IE6或IE7，则这不是一个选项。

    <李> < p > display:inline;
    这不应该用于布局，除了IE6/7，其中display:inline; zoom:1是对inline-block中断支持的回退hack。

    <李> < p > display:inline-block;
    这是我最喜欢的选择。它在所有浏览器上都运行良好且一致，但对于支持某些元素的IE6/7有一个警告。

inline-block的另一个重要警告是，由于内联方面，元素之间的空白被视为文本单词之间的空白，因此你可以在元素之间出现空白。有一些解决办法，但没有一个是理想的。(最好是元素之间不要有空格)

    <李> display:table-cell;
    另一个问题是浏览器兼容性问题。年长的ie根本不能使用这个。但即使对于其他浏览器，值得注意的是，table-cell被设计用于样式为table和table-row的元素内部的上下文中;孤立地使用table-cell并不是预期的方式，所以你可能会发现不同的浏览器对它的处理不同

其他你可能错过的技巧?是的。

  • 既然你说这是一个多列布局，有一个CSS列功能，你可能想知道。然而，它并不是最受支持的特性(IE甚至在IE9中也不支持，而且所有其他浏览器都需要供应商前缀)，所以你可能不想使用它。但这是另一种选择，而且你问过了。

  • 还有CSS FlexBox功能，它的目的是让你有文本流动从一个盒子到另一个盒子。这是一个令人兴奋的功能，将允许一些复杂的布局，但这仍然是非常在开发中-见http://html5please.com/#flexbox

希望这能有所帮助。

小开

为了补充Spudley的答案，如果你知道列的宽度，也有可能使用position: absolute和边距。

对我来说，选择方法时的主要问题是是否需要列填充整个高度(等高)，其中table-cell是最简单的方法(如果您不太关心旧的浏览器)。

小开

我更喜欢inline-block，但float仍然是将HTML元素组合在一起的有用方法，特别是当我们有一个元素应该放在左边，一个放在右边时，float工作得更好，写的行更少，而内联块在许多其他情况下工作得很好。

enter image description here


提交答案