Question

我有许多内嵌块元素，其中包含多列元素。内联块元素包含在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/

Answer 1

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

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

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

Answer 2

我想建议使用表格进行布局。或者您可以将表属性用于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/

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

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

使包含多列元素的div容器扩展为列宽

2 个答案: