<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> .container { display: table; border-spacing: 4px; table-layout: fixed; width: 150px; } .row { display: table-row; } .cell{ background: red; width: 150px; height:150px; display: table-cell; }</style><title></title></head><body><div class="container"><div class="row"> <div class="cell">55555555555555555555555555555555</div> <div class="cell"></div></div><div class="row"> <div class="cell"></div> <div class="cell"></div></div></div></body></html>请先看显示效果
问题是这样的,在我设置了table-layout:fixed的情况下,在第一个单元格中的数字5过多的情况下,单元格不会向右边扩展,但是,表格还是会向下边扩展,这个问题如何解决呢?如何让他不会扩展div的 height呢?
ps:如果想知道我为啥会用到table布局,请看这里
http://tieba.baidu.com/p/3459642533?pid=61455017385#61455017385
解决方案
.row { display: table-row; height:150px;}.cell{ background: red; width: 150px; display: table-cell;}