Question

我正在尝试使用CSS column-count属性。我当前的HTML结构由带有内部“ p ”标记的父级“ div ”组成，我将 column-count：3 应用于div和它工作正常。但是对于某些断点，列数显示为2而不是3。请问有谁能解释为什么某些断点的计数发生变化以及每一列的内容如何分配？

HTML
<div class="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod 
     voluptatum nemo illum, numquam aperiam minus sit cumque 
     perspiciatis dicta, molestiae inventore reiciendis aut, officiis 
     nobis deserunt provident commodi sunt aliquam!</p>
</div>

 CSS
 .wrapper {
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3;
  }

Answer 1

列布局显示以下默认行为（在Chrome 67上）：

无论column-count设置如何，除非列有至少两行，否则列不会被换行，除非...
...以这种方式排版将导致最多使用一半的列。

您可以通过指定CSS属性orphans和widows来控制填充列的方式，这些属性分别指定块容器必须在列的顶部或底部显示的最小行数

值1允许在列中实现高度平衡，即使对于仅跨越一行的文本也是如此。

将值设置为整数n意味着除最后一行外，所有使用的列都必须至少包含n行文本。这两个属性的默认值为2。

连续增加整数值将导致连续减少用于任何给定文本的布局列。

演示

我尝试设置可重现的测试设置容器尺寸和字体大小。由于它涵盖了6列。删除任何CSS属性“孤立”或“寡妇”只会导致3列的布局。

<!DOCTYPE html>
<html>
    <head>
        <title>CSS column  count demo</title>
        <style type="text/css">
            .wrapper {
                border: solid 1px black;
                font-family: Times New Roman;
                font-size: 12pt;
                width: 800px;
                height: 400px;
            }
            .wrapper p {
                column-count: 6;
                orphans: 1;
                widows:  1;
            }
        </style>
    </head>
    <body>
        <!--
             The following text covers 6 columns.
             Removing any of the CSS properties 'orphans' or 'widows' causes layout in 3 columns only.
        -->
        <div class="wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod 
             voluptatum nemo illum, numq</p>
        </div>
    </body>
</html>

Answer 2

增加数据，它将显示在3列中。如果没有数据，如何将其分为3列。您必须放置足够的数据，以便P标记下的数据将分为3列。

CSS栏计数错误

2 个答案: