Question

我有一个标题和定义列表：

<dl>
<dt>Item 1</dt>
<dd>Nulla at neque blandit, pretium sapien vitae, ornare neque.</dd>
<dt>Item 2</dt>
<dd>Quisque fermentum augue nec rutrum suscipit.</dd>
<dt>Item 3</dt>
<dd>Sed facilisis eros ac lorem bibendum, id tristique ipsum rhoncus.</dd>
<dt>Item 4</dt>
<dd>Duis scelerisque risus sit amet metus placerat volutpat.</dd>
<dt>Item 5</dt>
<dd>Duis tristique erat at leo lacinia, nec fringilla risus rhoncus.</dd>
<dt>Item 6</dt>
<dd>Cras rutrum eros dictum nulla tempus, in consequat tellus dignissim.</dd>
<dt>Item 7</dt>
<dd>Maecenas et erat vitae metus euismod luctus.</dd>

如果浏览器足够宽，我想以多列布局呈现。我能够做到这一点，但是，我希望只有在s之后才会发生分栏，而且从不在s和s的中间，或者在s之后。

现在我正在使用：

dl{column-count:2}
dt,dd{break-inside:avoid;column-break-inside:avoid;-webkit-column-break-inside:avoid}
dt{break-after:never;column-break-after:never;-webkit-column-break-after:never}

至少在Chrome中，这似乎没有任何效果。

Answer 1

你必须将dt和dd放入div中。此外，您还必须为此div使用break-inside。请注意，您还必须使用其他声明来兼容浏览器。例如，您必须为Firefox添加page-break-inside。有关更多示例，请参阅here。另请参阅代码段。

我希望我有任何帮助。

＆＃13;

dl {
  column-count: 2
}

dt,
dd,
.all {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid
}

dt {
  break-after: never;
  column-break-after: never;
  -webkit-column-break-after: never
}

＆＃13;

<dl>
  <div class="all">
    <dt>Item 1</dt>
    <dd>Nulla at neque blandit, pretium sapien vitae, ornare neque.</dd>
  </div>
  <div class="all">
    <dt>Item 2</dt>
    <dd>Quisque fermentum augue nec rutrum suscipit.</dd>
  </div>
  <div class="all">
    <dt>Item 3</dt>
    <dd>Sed facilisis eros ac lorem bibendum, id tristique ipsum rhoncus.</dd>
  </div>
  <div class="all">
    <dt>Item 4</dt>
    <dd>Duis scelerisque risus sit amet metus placerat volutpat.</dd>
  </div>
  <div class="all">
    <dt>Item 5</dt>
    <dd>Duis tristique erat at leo lacinia, nec fringilla risus rhoncus.</dd>
  </div>
  <div class="all">
    <dt>Item 6</dt>
    <dd>Cras rutrum eros dictum nulla tempus, in consequat tellus dignissim.</dd>
  </div>
  <div class="all">
    <dt>Item 7</dt>
    <dd>Maecenas et erat vitae metus euismod luctus.</dd>
  </div>
</dl>

＆＃13;

Break-Inside和Break-After不工作

1 个答案: