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

Posted 2021-03-27

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

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中的文本一样宽。

答案

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

另一答案

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

另一答案

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

另一答案

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