2

我有一些设置了“显示：内联块”的 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 并排 - 即显示为列。我希望他们每个人都占用他们需要的空间。它们中的每一个，使用我想要显示的内容，应该只占用大约 100 像素，所以很容易有足够的空间来并排显示几列。第一列有标签，第二列有数据，第三列有标签，第四列有数据。

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

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

4

4 回答 4

6

删除内联块，使用浮动，分配宽度和填充边距。这是演示

于 2012-05-08T18:12:01.817 回答
4

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

于 2012-05-08T18:02:30.583 回答
2

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

于 2012-05-08T18:07:07.013 回答
0

如果您希望它们全部并排，则它们的包含元素需要有足够的宽度才能允许。您可以通过应用空格来防止换行导致元素中断：nowrap;，但这可能会产生其他影响，具体取决于您构建标记的方式。

于 2012-05-08T18:03:34.563 回答