怎么样使用display达到table布局
0
悬赏园豆：40
[已解决问题]
解决于 2014-04-23 10:32
当前的html结构：
<div class="key">
</div>
<div class="value">
</div>
<div class="key">
</div>
<div class="value">
</div>
<div class="key">
</div>
<div class="value">
</div>
怎么样才能通过css使其达到table的布局呢？其中每一行都只有一个key和一个value？
如果将key和value的display设置为table-cell，所有的div就会处于同一行，
因为这种页面很多，所以也不想在key和value外在套一层div，请问有没有什么好的办法实现这样的效果呢？
最佳答案
0
.key { display: table-cell; float: left; } .value { display: table-cell; clear: left; }
这样应该可以，不过引入了浮动，也不知道是不是你需要的。
而且我强烈建议你直接换成表格做，最合适
收获园豆：40
这个确实可以达到每行只有一个key和一个value，不过不能像table那样，每一列的宽度一致，
而且就像你说的引入了浮动，就会有一些别的问题，我发现也可以这样：
.key,.value{
display:inline-block;
width:calc(50% - 20px);
vertical-align:top;
}
暂时还没有发现什么问题，
仍然非常感谢你的回答！
@子牙05:
firefox 4.0+已经开支支持calc()功能，不过要使用-moz-calc()私有属性，chrome从19 dev版，也开始支持私有的-webkit-calc()写法，IE9这次则牛逼了一次，原生支持标准的不带前缀的写法了。Opera貌似还不支持～～
这是CSS3属性了，不需要兼容性吗
@ThreeTree: 原来不知道在哪看到的说这个属性是2.1的来着。。。，看来确实是3的，多谢提醒~
