-1

我有如下列。最好的做法是使用float propertyorinline-block吗？

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

float 属性和 display 属性有什么作用，我应该什么时候使用它们？

4

3 回答 3

1

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

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

浮动问题

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

这就是 display 属性的神奇值 inline-block 发挥作用的地方。基本上，这是一种使元素内联的方法，但保留了它们的块功能，例如设置宽度和高度、顶部和底部边距和填充等。一个简单的示例如下所示：

看这里

于 2013-04-28T10:35:31.763 回答
0

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

花车

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

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

将此添加到 col 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;

浮点数没有 inline-block 自然存在的额外空白问题，因此这是一个合理的选择，但是您不能像在没有 JavaScript 的 inline-blocks 中那样在浮点数中垂直定位事物。

内联块

内联块有一个必须解决的空白问题，但奖励是您可以控制元素的垂直定位。内联块的父母也不会在他们身上崩溃。

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.
}

您不必对父元素做任何特别的事情，也不必担心其他元素将如何与之交互。但是这两种方式都有效，只有 inline-block 更强大一点。

于 2014-04-04T01:42:10.770 回答
0

两者都不。浮点数传统上用于此目的，因为在过去的 IE5 时代，这就是我们所拥有的一切。如果你想要等高的列，display: table-cell是你最好的选择。

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

于 2013-04-28T12:07:48.627 回答