1

我正在尝试使用 CSS 的 3 列布局，并希望使用垂直规则分隔列。iframe 中的这个示例是我正在寻找的，并且看起来很完美： http ://www.webdesignerdepot.com/2013/03/how-to-use-css3-columns/

问题是当从 iframe 中删除源 html 时，在调整窗口大小时规则变得错位：http: //netdna.webdesignerdepot.com/uploads7/how-to-use-css3-columns/demo.html

这发生在 Chrome 中。我错过了什么吗？或者有解决方法吗？

.cols3 {
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        -webkit-column-rule: 1px solid #000;

        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -moz-column-rule: 1px solid #000;

        column-count: 3;
        column-gap: 20px;
        column-rule: 1px solid #000;
}
4

1 回答 1

0

它很可能会变形，因为您使用的是 px 而不是 %，这意味着它不会在各种浏览器中发生变化。此外，您正在尝试做一个 2 列系统，而您的代码是 3，所以您也需要更改它。除此之外，如果没有看到您的其余代码，我不知道任何其他修复。

希望这可以帮助！

于 2016-04-19T12:23:36.180 回答