html - 使包含多列元素的 div 容器扩展到列的宽度

Question

我有许多内联 block 元素，其中包含多列元素。内联 block 元素包含在一个 nowrap 容器中，目的是让它们水平滚动。

列的高度是固定的(因此，列数可变)。但是在IE10中每个inline-block元素的宽度貌似只有一列的宽度，而在Chrome中是可见容器的宽度，所以有些列重叠了。有没有办法让每个行内 block 元素占据其整个宽度(即列的宽度)，这样就没有重叠？

.outerWrapper {
    white-space: nowrap;
}

.innerWrapper {
    display: inline-block;
    white-space: normal;
}

.columns {
    -webkit-column-width: 100px;
    column-width: 100px;
    height: 500px;
}

JSFiddle:http://jsfiddle.net/ts9xg/

Answer 1

更新:我能够通过以编程方式将 CSS3 列容器的宽度设置为它们的 scrollWidth 来完成此操作:

$(".parent").each(function() {
    $(this).width(this.scrollWidth);
});

JSFiddle:http://jsfiddle.net/ts9xg/11/ (列不再重叠)