DIVs包装，即使是“display：inline-block”

Question

我有一些带有“display：inline-block”设置的div（多列页面）。这不应该阻止它们包裹吗？我希望他们并排：

div.LabelColumn
{
    display: inline-block;
    padding: 10px 0 0 40px;
    vertical-align: top;
}

div.DataColumn
{
    display: inline-block;
    padding: 10px 0 0 5px;
    vertical-align: top;
}

为了澄清，我希望DIV并排 - 即显示为列。我希望他们每个人都能够占用他们需要的空间。它们中的每一个，使用我想要显示的内容，应该只占用大约100px，因此有足够的空间来并排显示几列。第一列是标签，第二列是数据，第三列是标签，第四列是数据。

为了提供更高级别的页面视图，我有一个div，我向左浮动。在右边，我想要多列数据。顺便说一句，这适用于Chrome，但不适用于IE。

如果可能的话，我希望宽度能够自动调整为与DIV中的文本一样宽。

Answer 1

删除内联块，使用浮动，指定宽度和填充边距。Here is the demo

Answer 2

使用inline-block不会阻止元素包装。事实上，当应用于div元素时，它会做相反的事情。

Answer 3

使用float。有关更多信息：http://css-tricks.com/all-about-floats/

Answer 4

如果你想要它们并排，它们的包含元素需要有足够的宽度来允许它们。您可以通过应用空格：nowrap;来阻止包装在元素中导致中断，但这可能会产生其他效果，具体取决于您的标记结构。