我正在为我的作业开发一个聊天应用程序，我快完成了，但我似乎无法让聊天框中的文本在底部对齐。我试过 vertical-align:bottom 和 display:table-cell 和 display:block 但无济于事。
HTML
<body>
<div id="wrapper">
<!-- title of app -->
<div id = "title">
<h2>SENG 513 Chat</h2>
</div>
<!--username-->
<div id="usernameIndicator">
</div>
<div id ="currentOnline">
<p>Currently Online</p>
</div>
<!--chat messages and online users-->
<div id ="main">
<div id="messageArea">
<ul id="messages"></ul>
</div>
<div id ="clear">
</div>
<div id ="usernames">
</div>
</div>
<!--chat and message bar-->
<form action ="">
<input id="m" autocomplete="off"/>
<button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/client.js"></script>
</body>
CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px; padding:0px;.
}
body{
font-family:helvetica;
}
#wrapper{
background-color:#3a6db7;
padding: 10px 30px 0px 30px;
margin:auto;
height:100%;
}
#title {
/*background-color:#4286f4;*/
text-align:center;
color:white;
}
#usernameIndicator h2
{
color:blue;
float:left;
width:90%;
}
#currentOnline{
}
#main
{
height:300px;
}
#messageArea{
width:90%;
height:100%;
background-color:#ffffff;
float:left;
overflow:auto;
display:block;
border: 1px solid;
}
#messages{
vertical-align:bottom;
display:table-cell;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
#usernames{
height:100%;
background-color:#e5e5e5;
border: 1px solid;
width:9%;
float:left;
overflow:auto;
}
#messagebarArea{
width:100%;
}
#form{
width:100%;
}
form input {
width:90%;
margin-top:20px;
margin-bottom:20px;
}
form button {
width: 9%;
background: rgb(130, 244, 255);
}
最佳答案
您需要使用位置来实现您所需要的。相对于父 div #messageArea 分配位置 比使用position:absolute；底部:0；关于#messages
#messageArea {
background-color: #ffffff;
border: 1px solid;
display: block;
float: left;
height: 100%;
overflow: auto;
position: relative;
width: 90%;
}
#messages {
bottom: 0;
display: table-cell;
position: absolute;
}
工作示例 https://jsfiddle.net/z71dttg5/1/
您可以通过以下链接阅读有关 CSS Position 的更多信息: https://www.w3schools.com/css/css_positioning.asp
关于html - 我有一个奇怪的 html 和 css 结构，如何让我的聊天消息与底部对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42799682/