列宽容器未扩展到所有列

Question

在获取具有列宽的内容以正确显示时有点问题。 Fiddle here.

需要做的是让灰色背景扩展到所有，而不仅仅是第一列。问题来自在“.wrapper”上使用“width:300px;”，但如果将其删除，则列的宽度/高度将不相等，并且在调整浏览器大小时会变得混乱。有什么建议吗？

非常感谢！

.wrapper {
    width:300px;
    background:#ccc;
}
.wrapper p {
    height:300px;

    -webkit-column-width:300px;
    -moz-column-width:300px;
    column-width:300px;
}

Answer 1

我不太确定这是否是您要查找的内容，因为该主题对我来说有些不清楚。

灰色背景是 300 像素，因为您在包装器上设置了 300 像素的背景。为了让它覆盖整个宽度，我们需要做的就是从包装器中移除宽度并将其添加到 p 元素中。

.wrapper {
    background:#ccc;
}
.wrapper p {
    width: 300px;
    height:300px;

    -webkit-column-width:300px;
    -moz-column-width:300px;
    column-width:300px;
}

http://jsfiddle.net/h53wbrsb/1/