CSS: 在两列中拆分字段
CSS: splitup fields in two columns
我有一些 html-output,我想用 css 更好地格式化它们。 我对 html 的生成方式没有影响。
我想有两列,具体取决于 class。我可以为每个字段使用静态位置,但如果数据中缺少某个字段,就会出现间隙。
这就是我要搜索的内容。 (如您所见,顺序不同)
如何将字段放在一列中,并动态处理高度?
非常感谢帮助。
远藤干杯
<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>
这是我第一次得到的最接近的 运行
.dataplugin_entry.person dt {
width: 100px;
float: left;
clear: left;
}
.dataplugin_entry.person dd {
width: 100px;
float: left;
}
.dataplugin_entry.person dt.aktiv,
.dataplugin_entry.person dt.kanton {
float:right
}
.dataplugin_entry.person dd.aktiv,
.dataplugin_entry.person dd.kanton {
float:right
}
<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>
因为您没有指定要在一栏中放置多少项目,我可以建议您利用 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 及更高版本。
希望这会有所帮助
我有一些 html-output,我想用 css 更好地格式化它们。 我对 html 的生成方式没有影响。
我想有两列,具体取决于 class。我可以为每个字段使用静态位置,但如果数据中缺少某个字段,就会出现间隙。
这就是我要搜索的内容。 (如您所见,顺序不同)
如何将字段放在一列中,并动态处理高度? 非常感谢帮助。
远藤干杯
<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>
这是我第一次得到的最接近的 运行
.dataplugin_entry.person dt {
width: 100px;
float: left;
clear: left;
}
.dataplugin_entry.person dd {
width: 100px;
float: left;
}
.dataplugin_entry.person dt.aktiv,
.dataplugin_entry.person dt.kanton {
float:right
}
.dataplugin_entry.person dd.aktiv,
.dataplugin_entry.person dd.kanton {
float:right
}
<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>
因为您没有指定要在一栏中放置多少项目,我可以建议您利用 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 及更高版本。
希望这会有所帮助