如何在支持所有设备屏幕时保持对齐状态？

问题描述：

html, body { 
 
      height: 100%; 
 
      width: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
      overflow: hidden; 
 
     } 
 
     .container { 
 
      position: absolute; 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: none; 
 
      margin-top: 0; 
 
\t  nargin-right: 0; 
 
      padding: 0; 
 
\t  overflow: hidden; 
 
     } 
 
     #cbox { 
 
      border: 1px black solid; 
 
      width: 99.0%; 
 
      height: 89.0%; 
 
      padding: 0; 
 
\t  margin: 0; 
 
      overflow-x: hidden; 
 
      overflow-y: auto; 
 

 
     } 
 
     .message { 
 
      -moz-box-sizing: border-box; 
 
      -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
      min-height: 50px; 
 
      max-height: 150px; 
 
      height: 50px; 
 
      width: 98.9%; 
 
      border: 1px black solid; 
 
      margin-top: 10px; 
 
      margin-left: 3px; 
 
      margin-bottom: 3px; 
 
     } 
 
     #snd-msg { 
 
      width: 97%; 
 
      height: calc(4% +50px); 
 
      overflow: hidden; 
 
\t  margin-bottom: 0px; 
 
     } 
 
     .pimg { 
 
      height: 45px; 
 
      width: 45px; 
 
      border: 1px black dashed; 
 
      margin-left: 3px; 
 
      margin-right: 3px; 
 
      margin-top: 2px; 
 
      margin-bottom: 2px; 
 
      vertical-align: middle; 
 
     } 
 
     .username { 
 
      margin-right: 3px; 
 
      margin-bottom: 2px; 
 
      text-decoration: underline; 
 
     } 
 
     .date { 
 
      _float: right; 
 
      float: right; 
 
      color: gray; 
 
      background-color: #dbdbdb; 
 
      font-family: monospace; 
 
      font-size: 8px; 
 
      margin-right: 10px; 
 
     } 
 
     .title { 
 
\t  height: 150px; 
 
      width: 100%; 
 
      margin-left: 5px; 
 
\t  font-size: 10px; 
 
     } 
 
\t .ctext { font-family: monospace; font-size: 9px; font-weight: 600; color: blue; float: right; _float: right; margin-right: 18px;}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
 
<meta http-equiv="cache-control" content="max-age=0" /> 
 
<meta http-equiv="cache-control" content="no-cache" /> 
 
<meta http-equiv="expires" content="0" /> 
 
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
 
<meta http-equiv="pragma" content="no-cache" /> 
 
<div class="container"> 
 
    <span class="title" id="title">Room Title</span> 
 
    <div id="cbox"> 
 
    <div class="message"> 
 
    <img class="pimg" src="https://otku.ga/images/tink.jpg"><span class="date">7/28/2017 - 4:0:34</span><span><span class="username" style="">tink</span><span class="text" style="font-size: 12px; font-family: monospace;">Donec orci metus, tempor et luctus ut, convallis non dui. Quisque mattis quis nulla quis laoreet. Morbi rutrum diam tellus, in volutpat nunc facilisis vitae. Nullam vitae ornare est, non congue turpis. Donec vel vehicula dolor, ut commodo enim. Donec sollicitudin nisi mi, vel facilisis quam aliquet faucibus. Vivamus venenatis laoreet lacus, ornare elementum nisl eleifend et. Fusce viverra vel purus quis ultricies. Nunc tempus dignissim ligula et condimentum. In ut dignissim urna, nec feugiat mi. Maecenas rutrum ipsum eget lacus suscipit, sit amet interdum nibh placerat. </span></span> 
 
    </div> 
 
<span class="ctext">People: <span id="count">0</span></span> 
 
<input type="text" id="snd-msg" placeholder="Enter a message.." /> 
 
</div>

对于生活，我的生活我无法弄清楚如何解决这个问题。我想要做的是让这个聊天完全响应。但是，正如你可以看到它的一点点硬，我想截断消息在150px最大保持一切对齐的例子什么东西看起来是正确的在这里https://otku.ga/chat.html?room=examplegroup

更改一些CSS和HTML部分检查我的答案。 – LKG

答

删除高度：50px;在.message类风格下。和每个屏幕分辨率，你必须使用媒体查询访问：https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/

如何在支持所有设备屏幕时保持对齐状态？

相关推荐