0

中央のウィンドウに 3 つの水平 div を表示する CSS があります。

.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/

4

2 に答える 2

4

表形式でデータを表示しています。を使用し<table>ます。

あなたが読んだその CSS チュートリアルは、テーブルがひどい悪であると言ったとき、プレゼンテーション/レイアウトにテーブルを使用することはひどい/悪であることを意味しました。

表形式のデータを表示する場合、 を使用すると意味的に正確<table>です。

于 2013-06-24T17:13:08.947 に答える
1

単純にhtmlテーブルを使用できます

または、引き続き div を使用する場合:

クラス行を追加する必要があります

   .row  {
        display: table-row;
        }

それから

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

リンクを確認してください http://snook.ca/archives/html_and_css/getting_your_di

于 2013-06-24T17:13:54.727 に答える