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

【问题标题】：Make div container containing multicolumn elements expand to width of columns使包含多列元素的 div 容器扩展到列的宽度
【发布时间】：2014-02-27 04:19:46
【问题描述】：

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

列的高度是固定的（因此列数可变）。但是，看起来每个 inline-block 元素的宽度在 IE10 中只有一列的宽度，而在 Chrome 中是可见容器的宽度，所以有些列重叠了。有没有办法让每个 inline-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/

【问题讨论】：

哇。我知道这条评论没有用，但这是一个非常有趣的问题。
因此，在 chrome 中，.innerWrapper 的宽度似乎取决于其内容如何填充容器没有 column-width 应用和然后应用column-width 并且不重新调整...只是记录这部分供我自己参考。
另外，在 Chrome 33 中，.outerWrapper 扩展了 7K+px 的高度，尽管 .innerWrapper 和 .columns 都保持 500px 的高度。

标签： html css layout multiple-columns

【解决方案1】：

更新：我能够通过以编程方式将 CSS3 列的容器宽度设置为它们的滚动宽度来实现这一点：

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

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

【讨论】：

我遇到了类似的问题，但我正试图让它在响应式设计中工作。您是否找到了有关为什么会发生这种情况的更多信息？

【解决方案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/

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

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

【讨论】：

不幸的是，列数是可变的，即我事先不知道会有多少列。
如果你知道每列的宽度，我想它会起作用。如果你对你的问题更清楚......那么我可以建议你很好的答案......你想要“外部容器的宽度== 列宽总和”对吗？
没错。我知道每列的宽度，但不知道列数 - 我有一个可变长度的文本块。
也许我不清楚 - 列的高度是固定的，所以我需要额外的文本来滚动到后续列。 jsfiddle.net/Un4bZ/2
你可以使用 CSS column 布局。如果你只想支持最新的浏览器，这里是示例链接 - w3schools.com/css/tryit.asp?filename=trycss3_column-count