html - 使用 CSS 创建美观的聊天布局

Question

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

这是我的 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;
}