css – 堆叠并在多列中,多行

作者:互联网

2026-03-27

HTML教程
有可能得到这个外观

从这段代码(使用CSS?)

Latitude
50.0
Longitude
100.0
h (metres)
0.000
Vφ (mm/y)
-6.4
Vλ (mm/y)
-15.3
Vh (mm/y)
-2.0

为了清楚起见,我不关心颜色.这是dt / dd对堆叠多列和多行对我来说很重要.我可以通过表获得我想要的外观,但它无法达到我的可访问性标准.我认为a在语义上更接近我想要的……它实际上是键/值对的列表.

这是我正在使用的颜色:

dl {border: 1px solid #C8C8C8;}dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}
表格本身没有任何内容.只有当它们用于显示而不是表达表格数据时才会出现问题.你有表格数据,它恰好有2列.仅仅因为它是一个2列的6行表并不意味着它必须看起来像一个.

http://jsfiddle.net/hgWxT/

table, tbody {    display: block;}tr {    display: inline-block;    width: 30%;}td, th {    display: block;}
Latitude 50.0
Longitude 100.0
h (metres) 0.000
Vf (mm/y) -6.4
V? (mm/y) -15.3
Vh (mm/y) -2.0