聊天对话的CSS定位问题

Question

我在对话/聊天页面的CSS定位方面遇到了问题。我的第一次尝试请参阅此小提琴中的代码：https://jsfiddle.net/1gsykwL5/

有没有办法让div包含'logo'100％的高度，以便文本（消息）不会在它下面包裹？我玩过位置：绝对但它确实搞砸了对齐。

我认为可能有一种更好的编码方式。但我不确定如何。请问有人可以提供建议吗？

谢谢！

PS - 代码包括Rick Jelier的填充修复：

body{
    font-family:arial;
}

.newchat {  
    padding: 10px;
}
.newdiv1 {
    width: 50px;
    height:100%;
    float: left;    
    margin: 0px 10px 10px 0px;
}

.chat2 ul{
    list-style: none;
    padding:0px;
}

.chat2 ul li
{
    border-radius: 5px;
}

.chat2 ul li:hover .thumbnail {
    background: #bd6982;
}

.chat2 ul li .thumbnail {
    display: inline-block;
    background: #bfbfbf;
    width: 50px;
    color: #ffffff;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s;
    transition: background 0.3s linear 0s;
    border-radius: 50%;
}

.chat2 ul li:nth-child(2n) {
    background: #f2f2f2;
}

.newdiv2 .meta {
    color: #b3b3b3;
    font-size: 12px;
     padding-left: 60px;
}



.newdiv2 .meta a:hover {
    text-decoration: underline;
}
.newdiv2 .meta a {
    color: #999999;
    text-decoration: none;
}

.newdiv2 h3 {
    font-size:14px;
    display: block;
    width: 100%;
    margin: 0px 0px 5px 0px;
    color: #808080; 
}

.newdiv2
{
    font-size:12px;
    color: #cccccc;
}

.newdiv2 .preview
{
    display:block;
    margin-bottom: 5px;
     padding-left: 60px;
}

.otherUser
{
    margin-left:30px;
}

<div class="chat2">
<ul>
    <li>
        <div class="newchat">
            <div class="newdiv2">
                <div class="newdiv1">
                    <a class="thumbnail" href="#">KS</a>
                </div>              
                <h3>Kenny Sing</h3>
                <span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
                      idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi iusdh fius dhuif hsdiuf hisdu fhusid f2f2f2 siudphf uisd h
                       osih doifh sidoh fiusd hiuf hdsiu hiu hiu</span>
                <div class="meta">3h ago · <a href="#">Category</a> · <a href="#">Reply</a></div>
            </div>
        </div>
      </li>
      <li class="otherUser">
        <div class="newchat">
            <div class="newdiv2">
                <div class="newdiv1">
                    <a class="thumbnail" href="#">KS</a>
                </div>          
                <h3>Kenny Sing</h3>
                <span class="preview">make sure you take a look at the... ashiud hiuas hdiu huio hiu hiuo hiu hiu hio uhoiu hoi hui hoiouh
                      idsh ifu hisuod hfoiu hidsu hiu fhiuo dshiu hiuo hiou hiu hoiuhiohiuo hiu ohi uhiou hi ouhi</span>
                <div class="meta">3h ago · <a href="#">Category</a> · <a href="#">Reply</a></div>
            </div>
        </div>
      </li>
     </ul>
</div>    

Answer 1

尝试在文本框本身的左侧添加60px的填充：

.newdiv2 .preview {
    /* current css */
    padding-left: 60px;
}

我在jsfiddle中尝试了它，它似乎工作。
希望这有帮助！

Answer 2

我以两种方式看待它：

1. 徽标的绝对位置（+顶部：10px，左侧：10px），以及相对于容器的左侧填充+位置 - 使用填充它不应该搞定您的对齐

或

1. 填充到邮件容器和徽标的负边距

   .newchat {     padding-left：70px; } .newdiv1 {     保证金：0px 10px 10px -60px; }

Answer 3

更少代码更有趣

由于你要求更精简的标记，这就是我接近它的方法：

body {
  background-color: #333;
}
.chat {
  list-style-type: none;
}
.meta-message {
  display: block;
  color: #999;
  margin-top: 5px;
}
.sender-message,
.reply-message {
  background-color: #fff;
  border-radius: 15px;
  display: block;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.25;
  max-width: 400px;
  margin-bottom: 15px;
  min-height: 60px;
  padding: 15px 15px 15px 80px;
  position: relative;
}
.sender-message::before,
.reply-message::before {
  content: attr(data-shortname);
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #a00;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}
.sender-message .name,
.reply-message .name {
  color: #a00;
  font-size: 28px;
  margin: 0;
  text-align: right;
}
.reply-message {
  background-color: #eee;
  margin-left: 80px;
}
.reply-message .name {
  color: #0a0;
}
.reply-message::before {
  background-color: #0a0;
}

<ol class="chat">
  <li class="sender-message" data-shortname="kk">
    <h3 class="name">Kenny King</h3>Is there any way to make the div containing the 'logo' 100% height, so that the text (message) doesn't wrap underneath it? I've played around with position: absolute but it really screws up alignment.<span class="meta-message">2016/12/13 12:41 p.m.</span>
  </li>
  <li class="reply-message" data-shortname="cw">
    <h3 class="name">connexo websolutions</h3>Let's see how far we can get from a small codepen snippet...<span class="meta-message">2016/12/13 12:42 p.m.</span>
  </li>
</ol>

  

https://codepen.io/connexo/pen/eBPXbd

为什么我使用ol？

因为聊天包含（通常按时间顺序排列）有序列表的消息（其中 的顺序很重要）。

我想你可以从这里开始，到达你想去的地方。