列计数，并保持与HTML/CSS中的下一个

我有一个结构，例如两列设计。列计数，并保持与HTML/CSS中的下一个

<div style="-webkit-column-count:2;-moz-column-count:2;column-count:2"> 
<dl> 
<dt>Category A</dt> 
    <dd>Item A1</dd> 
    <dd>Item A2</dd> 
    <dd>Item A3</dd> 
<dt>Category B</dt> 
-------- here goes the automatic column switch with css [-webkit-|-moz-]column-count:2 
    <dd>Item B2</dd> 
    <dd>Item B3</dd> 
<dt>Category C</dt> 
    <dd>Item C1</dd> 
    <dd>Item C2</dd> 
</dl> 
</div>

在上面的例子中，类别B应该在第二列的顶部。

是否有可能以某种方式确保<dt>Categry</dt>始终至少有一个<dd>Item</dd>以下？

来源

2012-02-14 mawimawi

是的，这可能与单一的定义列表作为标记。

您只需确保您的dt元素的高度至少是目前的line-height的两倍，与padding-bottom以及跟在dt之后的任何dd元素具有负值top-margin以补偿应用于dt的填充。然后使用break-inside: avoid;来防止浏览器在您的dt元素中断裂。

例子：https://jsfiddle.net/8tqgw1wx/2/

相关CSS：

dt { 
    padding-bottom:1.2em; /* Must match your line-height */ 
    break-inside: avoid; 
} 
dt + dd { 
    margin-top:-1.2em; /* Must match your line-height */ 
}

来源

2016-04-25 22:52:20

看起来像没有办法解决我目前的标记问题。但是我发现了一个合理的解决方案，使用只有一个单元的表

这样的表格被视为一个不能分割的块。我没有那么多<dd>项目每<dt>类别，所以我可以生活在输出。由于正在从数据库查询产生的整个页面这对我产生这样的输出模板语言这样一个不错的解决方案：

<div style="-webkit-column-count:2;-moz-column-count:2;column-count:2"> 

<table><tr><td><dl> 
<dt>Category A</dt> 
    <dd>Item A1</dd> 
    <dd>Item A2</dd> 
    <dd>Item A3</dd> 
</dt> 
</dl></td></tr></table> 

<table><tr><td><dl> 
<dt>Category B</dt> 
    <dd>Item B2</dd> 
    <dd>Item B3</dd> 
</dl></td></tr></table> 

<table><tr><td><dl> 
<dt>Category C</dt> 
    <dd>Item C1</dd> 
    <dd>Item C2</dd> 
</dl></td></tr></table> 

</div>

来源

2012-02-15 08:29:14 mawimawi

为什么不使用DIV，而不是一个单元格表？ – GolezTrol 2012-08-22 09:22:12

因为div可能会分裂。 – mawimawi 2012-09-06 09:30:20

列计数，并保持与HTML/CSS中的下一个

回答

相关问题