html - 在 CSS 中保留列

Question

我有一些 html 输出，我想用 css 格式化。 我无法影响 html 的生成方式，也无法更改它。

到目前为止，我得到了一个两列布局:http://jsfiddle.net/uvg6f3tr/

“语言”之后的所有字段都应返回到第 1 列或具有负边距。 我试过了，但我无法“突破”第二列并在第一列中显示下面的结果。如果可能的话，此时我想转义一般的列。

非常感谢帮助。

div.person dl {
    -webkit-column-count: 2;
    -moz-column-count: 2;
         column-count: 2;

	margin: 0px;
	width: auto;
}

dt { clear:left }
dt, dd { float:left;}  

<div class="inline dataplugin_entry person sectionedit2">
    <dl>
        <dt class="id">ID<span class="sep">: </span></dt>
        <dd class="id">1234</dd>
            
        <dt class="nachname">Nachname<span class="sep">: </span></dt>
        <dd class="nachname">Bob</dd>
        
        <dt class="vorname">Vorname<span class="sep">: </span></dt>
        <dd class="vorname">Smith</dd>
        
        <dt class="kanton">Kanton<span class="sep">: </span></dt>
        <dd class="kanton">ZH</dd>
        
        <dt class="rat">Rat<span class="sep">: </span></dt>
        <dd class="rat">NR</dd>
        
        <dt class="qry">xyd<span class="sep">: </span></dt>
        <dd class="qry">XYZ</dd>
        
        <dt class="fraktion">adsa<span class="sep">: </span></dt>
        <dd class="das">XYZ</dd>
        
        <dt class="funktion">asd<span class="sep">: </span></dt>
        <dd class="funktion">fasd</dd>
    
        <dt class="phone">Phone<span class="sep">: </span></dt>
        <dd class="phone">055 555 55 55</dd>
        
        <dt class="mail">Mail<span class="sep">: </span></dt>
        <dd class="mail"><a class="mail" href="mailto:hugo@boss.com">hugo@boss.com</a></dd>
        
        <dt class="website">Website<span class="sep">: </span></dt>
        <dd class="website"><a rel="nofollow" class="urlextern" href="http://www.url.com">http://www.url.com</a>

        </dd><dt class="twitter">twitter<span class="sep">: </span></dt>
        <dd class="twitter">test</dd>
        
        <dt class="language">Language<span class="sep">: </span></dt>
        <dd class="language">EN</dd>
        
        <dt class="topics">Topics<span class="sep">: </span></dt>
        <dd class="topics">tag1<span class="sep">, </span>tag2<span class="sep">, </span>tag3</dd>
        
        <dt class="intrests">Intrests<span class="sep">: </span></dt>
        <dd class="intrests">a, b, c</dd>
        
        <dt class="access">Zutrittsberechtigte<span class="sep">: </span></dt>
        <dd class="access">access</dd>
        
        <dt class="kommission">Kommission<span class="sep">: </span></dt>
        <dd class="kommission">xyz</dd>
        
    </dl>
</div>

Answer 1

specification for CSS columns声明内容应在列之间保持平衡 - 也就是说列应具有等高。

Mozilla developer network状态-

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.

乍一看，这似乎排除了您需要的任意分栏符。

有一个column-fill property这允许改变这种平衡行为，但似乎这是 currently only implemented in Firefox - 它本身并不能解决您的问题。

它可以提供帮助的地方是使用比例单位(最好是 EM)设置列容器(大概是定义列表)的高度或最大高度，这样列就被限制在语言元素所在的点之外呈现。如果列是根据流自动布局的，而不是平均分配的，这可能会产生单个任意列中断的效果。

如果没有此列填充支持，这仅在列在所需元素前后的内容方面合理平衡时才有效 - 或者按列数按比例划分 - 但如果是这种情况，你可能不会'无论如何都没有问题。

似乎为解决您的问题量身定制的是 break-after property允许强制分栏 as per the specification .不幸的是，完全可以预见的是，根据 Mozilla 开发者网络页面(该页面可能不完全准确或最新)，这尚未得到广泛支持。

您可能需要将它与 propitiatory -webkit-column-break-after 属性一起使用以获得最大兼容性，和将它与 column-fill: auto 值结合使用并设置高度以减少父级列位于语言元素下方以覆盖您的大部分基础(这主要是为了支持 Firefox)。

当然值得注意的是 CSS 列本身 do not offer universal support - 明显缺少对 Internet Explorer 9 的支持。因此，对您的任意分栏符的普遍支持可能是可以接受的。