使用CSS创建一个漂亮的聊天布局

Question

我试图以某种方式安排一些html元素来建立一个良好的用户界面。 我正在使用MVC和ASP.NET来创建这个聊天客户端。但我无法正确安排物品。默认情况下，visual studio中的MVC项目在网页顶部附带一条项目，并一直延伸到整个页面。我想让页面左上方的textarea位于默认条带下方，整个message-dialog div位于文本区域下方，宽度与textarea相同。

这是我的HTML：

<div class="container" id="message-dialog">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
</div>
<div class="container" id="discussion-dialog">
    <textarea rows="20" cols="50" id="discussion"></textarea>
</div>

我有一次设置，但是当我改变了页面的大小时，所有的div都重叠了，只是一团糟。

Answer 1

#discussion-dialog 
{
    border: 3px solid #cccccc;
    font-family: Tahoma, sans-serif;
    position: relative;
    top: 5px;
}

#message-line {
    position: relative;
}

#message-dialog
{
    position: relative;
    top: 10px;
    font-family: Tahoma, sans-serif;
}