Question

我的栏目如下。最佳做法是使用float property或inline-block吗？

+----------------+--------------------+-------------------+
|     col1       |      col2          |    col3           |
|                |                    |                   |
+---------------------------------------------------------+

float属性和显示属性的作用是什么，我何时应该使用它们？

Answer 1

使用CSS浮动，可以向左或向右推动元素，允许其他元素环绕它。

Float经常用于图像，但在处理布局时也很有用。

浮动问题

当您在CSS代码中浮动时出现的问题是您需要的   采取一些预防措施，使周围的元素包含   浮动元素，并且还要避免代码中的后续元素   偷偷靠近它。另一个问题是，如果你有浮动   列表将占用几行（从视觉上讲）和   内容是不同的高度，你是一个受伤的世界。

这是显示属性的魔术值inline-block   发挥作用。基本上，它是一种使元素内联的方法，但是   保留其块功能，如设置宽度和高度，   顶部和底部边距和填充等。一个简单的例子   像这样：

SEE HERE

Answer 2

都不是。浮游物传统上用于此，因为在IE5的好日子里，这就是我们所拥有的。如果您想要相同的高度列，display: table-cell是您最好的选择。

http://tinker.io/619bf/1

Answer 3

浮动列是更常见和传统的方法。 Bootstrap和Foundation都使用浮点数。但是，每种方法都有其缺点，并且决定您想要使用哪些缺点将决定您将采用哪条路线。我个人更喜欢内联块。

浮筒

浮动更容易设置。如果将此代码添加到这些浮动的父元素，它将不会崩溃。

.parent:after {
    display: block;
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

将它添加到第1列，第2列和第3列以使它们浮动并为它们提供单独的宽度：

col1, col2, col3 {
    display: block;
    float: left;
}

您可能还会考虑添加border-box，因此填充和边框不会折叠您的网格。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

浮点数没有内联块自然会产生的额外空白问题，所以这是一个合理的选择，但是你不能像浮点数一样垂直放置在没有JavaScript的内联块中。

内联块

内联块有一个必须修复的空白问题，但奖励是你可以控制元素的垂直定位。内联块的父母也不会崩溃。

col1, col2, col3 {
    display: inline-block;
    margin-right: -0.25em; //This removes the white space created by the "inline" properties of this display type
    vertical-align: top; //Inline-block naturally aligns to the bottom, so this will give it more expected behavior.
}

您不必对父母做任何特别的事情，也不必担心其他元素如何与之互动。但这两种方式都是有效的，只有内联块更有能力。

float属性vs inline-block

3 个答案:

浮筒

内联块