css - display:table 单元格变形问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - display:table 单元格变形问题

伊谢尔伦 2017-04-17 11:16:17

[HTML讨论组]

596

<!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>
<p class="container">
<p class="row">
    <p class="cell">55555555555555555555555555555555</p>
    <p class="cell"></p>
</p>
<p class="row">
    <p class="cell"></p>
    <p class="cell"></p>
</p>
</p>
</body>
</html>

请先看显示效果

问题是这样的,在我设置了table-layout:fixed的情况下,在第一个单元格中的数字5过多的情况下,单元格不会向右边扩展,但是,表格还是会向下边扩展,这个问题如何解决呢?如何让他不会扩展p的 height呢?

ps:如果想知道我为啥会用到table布局,请看这里
http://tieba.baidu.com/p/3459642533?pid=61455017385#61455017385

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(1)

黄舟2017-04-17 11:18:17 1楼

.row {
    display: table-row;
    height:150px;
}
.cell{
    background: red;
    width: 150px;
    display: table-cell;
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>