18

我有一大段文本流入 CSS 多列布局，例如使用CSS 连字符拉伸两列、三列或四列。在某些时候，需要提前结束某一列的文本，以便让段落的其余部分从第二列的顶部开始。

有什么方法可以简单地设置 a<column-break>以在下一列的顶部开始其余文本？

目前我正在用很多<br>s 填充列（需要分栏符）以延长 HTML 中的列以达到效果。

此外，每当任一列中的某些内容发生变化时，<br>填充量就会不足，需要重新评估。

#multicolumn{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    
}
<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<br>
<br>
<br>
<br>
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

请参阅我的 JSFiddle。

有什么方法可以优雅地“结束”第一列并告诉浏览器开始下一列中的其余内容？

css3 多列分页符

4

7 回答 7

6

5. 分栏

当内容以多列布局时，用户代理必须确定分栏符的放置位置。将内容分成列的问题类似于将内容分成页面。

引入了三个新属性以允许在与分页符相同的属性中描述分栏符：'<a href="http://www.w3.org/TR/css3-multicol/#break-before" rel=" noreferrer">break-before'、'<a href="http://www.w3.org/TR/css3-multicol/#break-after" rel="noreferrer">break-after'和'<a href="http://www.w3.org/TR/css3-multicol/#break-inside" rel="noreferrer">break-inside'。这些属性采用与 'page-break-before'、'page-break-after' 和 'page-break-inside' [CSS21]相同的值。此外，还添加了一些新的关键字值。

这些属性描述了生成框之前/之后/内部的分页/分栏行为。这些值在[CSS21]中被规范定义：

  • auto：在生成的框之前（之后，内部）不强制也不禁止分页/分栏。
  • always：始终在生成的框之前（之后）强制分页。
  • avoid：避免在生成框之前（之后，内部）出现分页/分栏。
  • left：在生成的框之前（之后）强制一个或两个分页符，以便将下一页格式化为左页。
  • right：在生成的框之前（之后）强制一个或两个分页符，以便将下一页格式化为右页。

本规范添加了以下新值：

  • page：始终在生成的框之前（之后）强制分页。
  • column：始终在生成的框之前（之后）强制分栏。
  • avoid-page：避免在生成框之前（之后，内部）出现分页符。
  • avoid-column：避免在生成框之前（之后，内部）出现分栏。

因此，您可以使用类似的东西

#multicolumn {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
.column {
  break-before: column;
  break-after: column;
}
<div id="multicolumn">
  <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
  <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>

但是，似乎只有 Internet Explorer 10+ 和 Opera 11.10-12.1 支持这些属性。

于 2015-11-07T19:07:44.673 回答
5

解决此问题的一种方法是将文本实际包装在段落（p标签）中，正如您应该为语义所做的那样，并且不允许您的第二段中断，因为它永远不会超过 1 列。

这可以通过使用break-insideCSS 属性来实现。 https://developer.mozilla.org/en/docs/Web/CSS/break-inside

基于您的代码段的代码示例：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
 #multicolumn {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}
p {
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 0 0 1.4em;
}
p:nth-of-type(2) {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
 
<div id="multicolumn">
  <p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
  <p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>

于 2015-11-12T09:39:16.650 回答
4

使用<p>标签来区分段落。

<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim veniam.</p>
<div id="filler"></div>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor 
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
placerat facer possim assum.</p>
</div>

和 CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;

}

#filler {
float: left;
position: relative;
background-color: #f00;
height: 120px;
width: 50%;

http://jsfiddle.net/mnz2h9hr/2/

标签将<p>段落保持在一起，“填充”（标记为红色）保持一个没有文本的区域。

于 2015-11-07T19:11:39.257 回答
4

对于您的情况，最好的解决方案是使用网格系统。请在全页视图中运行代码段。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
 <div class="col-sm-6" style="background-color:lavenderblush;">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
      <div class="col-sm-6" style="background-color:lavender;">
        SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
        dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

    </div>
  </div>
</div>

</body>
</html>

于 2015-11-12T06:49:52.897 回答
3

If you are able to wrap each column in a div, then the most elegant solution would be to use a bootstrap style grid.

    .row {
      margin: 0 -15px;
    }
    .column {
      box-sizing: border-box;
      float: left;
      padding: 0 15px;
      width: 50%;
    }
<div id=row">
  <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
  <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>

If you are using a wysiwyg to enter copy, then you must have access to a source button to wrap your columns in divs. Then using the above code, columns become very simple; and easily made responsive.

于 2015-11-09T01:20:20.693 回答
2

详细说明@Oriol 答案您可以设置宽度，因此第一列将始终使用左半部分。

#multicolumn {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

.column:nth-of-type(1) {
 width:50%;
}
<div id="multicolumn">
  <div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
  <div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>

于 2015-11-13T15:51:25.493 回答
1

从技术上讲，这不是您要插入的 CSS 多列功能，但这看起来很相似。

.column {
   width : 46%;
   margin: 0% 2%;
   height: 100%;
   float: left;
}

<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

这是 jsFiddle：http: //jsfiddle.net/Vbr9d/242/

于 2015-11-14T16:43:50.780 回答