盈虧內外磨合後不工作

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} 

至少在鉻這似乎並沒有產生任何影響。

Answer 1

您必須將dt和dd放入div。此外，你也必須使用break-inside這個div。請注意，您還必須使用其他聲明來兼容瀏覽器。例如，您必須爲Firefox添加page-break-inside。進一步的例子參見here。另請參閱片段。

我希望我有任何幫助。

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 
 
}

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