html - CSS:在两列中拆分字段

Question

我有一些 html 输出，我想用 css 更好地格式化。 我对 html 的生成方式没有影响。

我想要两列，具体取决于类别。我可以为每个字段使用静态位置，但如果数据中缺少某个字段，就会出现间隙。

这就是我要搜索的内容。 (如你所见，顺序不同)

如何将字段放在一列中，并动态处理高度？ 帮助高度赞赏。

欢呼吧

<div class="inline dataplugin_entry person">
    <dl> 
        <dt class="id">ID<span class="sep">: </span></dt>
        <dd class="id">487</dd> 
        
        <dt class="wsid">wsID<span class="sep">: </span></dt>
        <dd class="wsid">2129</dd> 
        
        <dt class="aktiv">aktiv<span class="sep">: </span></dt>
        <dd class="aktiv">1</dd> 

        <dt class="nachname">Nachname<span class="sep">: </span></dt>
        <dd class="nachname">Smith</dd> 
        
        <dt class="vorname">Vorname<span class="sep">: </span></dt>
        <dd class="vorname">Bob</dd> 
        
        <dt class="kanton">Kanton<span class="sep">: </span></dt>
        <dd class="kanton">ZH</dd>
    </dl>
</div>

Answer 1

因为您没有指定要在一列中放置多少项，我可以建议您利用column-count css3 property .它的作用是使浏览器将元素的内容均匀分布在恰好该数量的列中。所以在你的情况下我假设 2:

<div class="inline dataplugin_entry person">
    <dl> 
        <dt class="id">ID<span class="sep">: </span></dt>
        <dd class="id">487</dd> 

        <dt class="wsid">wsID<span class="sep">: </span></dt>
        <dd class="wsid">2129</dd> 

        <dt class="aktiv">aktiv<span class="sep">: </span></dt>
        <dd class="aktiv">1</dd> 

        <dt class="nachname">Nachname<span class="sep">: </span></dt>
        <dd class="nachname">Smith</dd> 

        <dt class="vorname">Vorname<span class="sep">: </span></dt>
        <dd class="vorname">Bob</dd> 

        <dt class="kanton">Kanton<span class="sep">: </span></dt>
        <dd class="kanton">ZH</dd>
    </dl>
</div>   

CSS

dl {
    -webkit-column-count: 2;
    -moz-column-count: 2;
         column-count: 2;
}

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

fiddle 的例子在这里 - http://jsfiddle.net/dvbdkr28/2/

浏览器支持相当不错，所以所有现代浏览器都支持它，加上 IE10 及更高版本。在手机上支持达到 Android 2.3 及更高版本。

希望对你有帮助