将包含多列元素的div容器展开为列宽

我有许多内嵌块元素，其中包含多列元素。 内嵌块元素包含在一个nowrap容器中，意图使这些元素水平滚动。

列是固定的高度（因此，列数可变）。 但是，看起来每个内联块元素的宽度只是IE10中一列的宽度，以及Chrome中可见容器的宽度，因此某些列重叠。 有没有办法让每个内嵌块元素占据其全部宽度（即列的宽度），因此没有重叠？

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

---

更新：我能够通过以编程方式将CSS3列的容器的宽度设置为它们的scrollWidth来实现此目的：

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

JSFiddle：http://jsfiddle.net/ts9xg/11/（列不再重叠）

---

我想建议使用表格进行布局。 或者你可以使用表格属性DIV元素。 以下是给出的例子。

HTML

<div class="container">
<div class="containerRow">
    <div class="col1">
        This is column 1
    </div>
    <div class="col2">
        This is column 2
    </div>
    <div class="col3">
        This is column 3
    </div>
</div>
</div>

CSS

.container{border:1px red solid;display:table;table-layout:fixed;}
.containerRow{display:table-row;}
.containerRow > div{display:table-cell;min-height:200px;border:1px green solid;}
.col1{width:100px;}
.col2{width:150px;}
.col3{width:100px;}

http://jsfiddle.net/murli2308/Un4bZ/1/

我认为你需要这样的结构......

如果你擅长表格......你也可以使用表格布局......

链接地址: http://www.djcxy.com/p/87827.html

上一篇: Make div container containing multicolumn elements expand to width of columns

下一篇: Div hidden underneath containing div scrollbar with overflow: scroll set