html - CSS Divs 不显示高度属性

Question

我有这个 CSS 显示 3 个水平 div，中心窗口：

.chatarea {
    display: table;
    padding-top:50px;
    margin:0px auto;
    width:80%;
}
.nick {
    width: 20%;
    border-right-style: solid;
    text-align: center;
    position:absolute; 
    top:0; 
    left:0;
}
.timestamp {
    width: 20%;
    border-left-style: solid;
    position:absolute; 
    top:0; 
    right:0; 
}
.message {
    border-style: solid;
    text-align:center;
    position:relative;
}

当内容/文本变长时，边框的高度不会扩大。

我也在这里创建了一个小提琴：http: //jsfiddle.net/fGSsa/

Answer 1

您正在以表格格式显示数据。使用<table>.

当您阅读的那个 CSS 教程说表格是一些可怕的邪恶事物时，他们的意思是使用表格进行演示/布局是可怕的/邪恶的。

呈现表格数据时，使用<table>.

Answer 2

您可以简单地使用 html 表格

或者，如果您仍想使用 divs ：

您应该添加一个类行

   .row  {
        display: table-row;
        }

然后

.nick, .timestamp, .message {
    display: table-cell;
    }

请检查链接 http://snook.ca/archives/html_and_css/getting_your_di