18

CSS ハイフニングを使用して、たとえば 2 列、3 列、または 4 列に拡張された CSS 複数列レイアウトに流れ込むテキストの大きな段落があります。ある時点で、段落の残りの部分を 2 番目の列の先頭から開始できるようにするために、列のテキストの 1 つを早く終了する必要があります。

<column-break>次の列の先頭から残りのテキストを開始するようにa を設定する方法はありますか?

<br>現在、効果を達成するために、HTML で列を長くするために、列 (列区切りが必要) に多くの s を詰め込んでいます。

さらに、いずれかの列で何かが変更されるたびに、<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.列の区切り

コンテンツが複数の列に配置されている場合、ユーザー エージェントは列の区切りを配置する場所を決定する必要があります。コンテンツを列に分割する問題は、コンテンツをページに分割するのと似ています。

改ページと同じプロパティで列区切りを記述できるようにするために、3 つの新しいプロパティが導入されました。 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: 生成されたボックスの前 (後) に 1 つまたは 2 つの改ページを強制して、次のページが左ページとしてフォーマットされるようにします。
  • right: 生成されたボックスの前 (後) に 1 つまたは 2 つの改ページを強制して、次のページが右ページとしてフォーマットされるようにします。

この仕様により、次の新しい値が追加されます。

  • 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

これに取り組む 1 つの方法は、実際にテキストを段落 (pタグ) でラップすることです。これは、セマンティクスに対しても行う必要があり、2 番目の段落が 1 列より長くなることはないため、2 番目の段落が壊れないようにします。

break-insideこれは、 CSS プロパティ を使用して実現できます。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

あなたの状況では、最善の解決策はグリッド システムを使用することです。フル ページ ビューでスニペットを実行してください。

<!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

各列を div でラップできる場合、最も洗練された解決策は、ブートストラップ スタイルのグリッドを使用することです。

    .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>

wysiwyg を使用してコピーを入力している場合は、ソース ボタンにアクセスして、列を div でラップする必要があります。次に、上記のコードを使用すると、列は非常に単純になります。簡単にレスポンシブにできます。

于 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 に答える