css - 三列 float ，内部有 1px 的空间？

Question

谁能帮我在这里找到一个 CSS 解决方案，好吗？这是一个涂鸦:

wrapper 的宽度可变， float 框的内部空间应恰好为 1px。 margin-bottom 没问题 - 但 margin 在左边/右边。如何用 width:33% 解决这个问题？？ :(

提前致谢。

编辑:这将是一个适合移动设备的页面。因此，如果浏览器尺寸较小，列数就会减少。我会用@media 来做这件事。

Answer 1

不可能按照您的想法混合使用百分比和像素。但是，您可以执行以下操作:

.innerdiv {
    display: inline-block; /* IE 8+ Compatible because IE 7 only supports inline-block on elements that are inline by default. There are work-arounds to this though. */
    width: 30%;
    margin: 2%; /* gutter */
}

也就是说，您还可以使用:

.wrapper {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-gap: 1px;
    -moz-column-gap: 1px;
    -webkit-column-gap: 1px;
}

但是，列的顺序是先填充左侧，然后移至下一项，因此使用它会弄乱您的顺序，但会平衡高度。另一个要使用的 CSS 是 grid-columns 但目前还不受支持，所以目前没有使用编码。