首页 新闻 赞助 找找看

怎么样使用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,请问有没有什么好的办法实现这样的效果呢?

    

子牙05的主页 子牙05 | 初学一级 | 园豆:166
提问于:2014-04-22 15:08
< >
分享
最佳答案
0
 .key {
     display: table-cell;
     float: left;
}

.value {
     display: table-cell;
     clear: left;
}

这样应该可以,不过引入了浮动,也不知道是不是你需要的。

而且我强烈建议你直接换成表格做,最合适

收获园豆:40
ThreeTree | 小虾三级 |园豆:1490 | 2014-04-22 21:14

这个确实可以达到每行只有一个key和一个value,不过不能像table那样,每一列的宽度一致,

而且就像你说的引入了浮动,就会有一些别的问题,我发现也可以这样:

.key,.value{

  display:inline-block;
  width:calc(50% - 20px);
  vertical-align:top;

}

 

暂时还没有发现什么问题,

仍然非常感谢你的回答!

子牙05 | 园豆:166 (初学一级) | 2014-04-23 09:55

@子牙05: 

 firefox 4.0+已经开支支持calc()功能,不过要使用-moz-calc()私有属性,chrome从19 dev版,也开始支持私有的-webkit-calc()写法,IE9这次则牛逼了一次,原生支持标准的不带前缀的写法了。Opera貌似还不支持~~

这是CSS3属性了,不需要兼容性吗

ThreeTree | 园豆:1490 (小虾三级) | 2014-04-23 10:06

@ThreeTree: 原来不知道在哪看到的说这个属性是2.1的来着。。。,看来确实是3的,多谢提醒~

子牙05 | 园豆:166 (初学一级) | 2014-04-23 10:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册