【发布时间】:2013-04-17 18:32:19
【问题描述】:
如果browser window 是fully maximized,我的应用程序看起来会很好。当我minimized browser window 时,内容得到collapsed。
我不需要折叠内容。我给了div,看起来像textarea,只在%中显示消息。
我的 Jsp 将是,
<div style="padding-left: 16px;" id="messageLayout">
<div id="messageDisplayArea" >
</div>
</div>
当我点击send button 时,我的jquery 将是,
function send(){
name = $("#name").val();
message = $("#message").val();
var time = "Time";
var user = "<div id='user' class='fontStyle'>"+name+"</div>";
var msg = "<div id='msg' class='fontStyle'>"+message+"</div>";
var timeStamp = "<div id='time' class='fontStyle'>"+time+"</div>";
var row = "<div id='msgSet' >"+ user + msg + timeStamp +"</div>";
$("#messageDisplayArea").append(row);
}
我的CSS 将是,
#messageDisplayArea {
height: 250px;
width: 100%;
overflow: auto;
border-color: #6495ED;
white-space: normal;
border-style: solid;
border-width: 1px;
background-color: white;
}
#user {
width: 10%;
float: left;
color: red;
word-wrap: break-word;
}
#msg {
width: 79%;
color: green;
float: left;
word-wrap: break-word;
}
#time {
width: 10%;
float:left;
color: gray;
word-wrap: break-word;
padding-left: 5px;
}
#msgSet {
width: 100%;
float:left;
word-wrap: break-word;
padding-bottom: 5px;
padding-top: 5px;
}
肯定会感谢好的答案。
【问题讨论】:
-
您可以使用 jsfiddle.net 给我们您网站的代码吗?
-
我更新了我的内容。请立即查看。
-
再来一些 HTML 怎么样?可以给
#messageDisplayArea已经填满内容吗? -
#messageDisplayAreadiv 中没有更多代码。我在Jquery中所做的一切都是为了在单击按钮时动态附加数据。
标签: jquery html css browser user-interface