左右浮动div，同时保持分开的线条

Question

我的代码如下，我遇到了两个问题。

问题＃1：在第2条消息中，您可以看到，＆＃34; Doe＆＃34;被移动到新线，而不是调整相同的行。
问题＃2：我的每一行都在我的clear: both中浮动并使用.t_message，但正如您所看到的，两个街区位于同一条线上。

为什么以及如何解决这个问题？感谢。

＆＃13;

＆＃13;

.time {
    float: right;  
}

.t_message {
    display: inline-block;
    padding: 10px;
    border-radius: 17px;
    background: #e8e8f8;
    clear: both;
    margin: 13px 11px 0 11px;
}

.t_message .time {
    margin-left: 10px;
    margin-left	: 20px;
}

.my_t_message {
    text-align: right;
    float: right;
}

.my_t_message .avatar {
    float: right;
    margin-left: 10px;
}

.my_t_message .time {
    float: left;
    margin-left: 0;
    margin-right: 10px;
}

.name {
    display: block;
}

.b_message {
    overflow: hidden;
}

.t_message .avatar {
    margin-right: 7px;
}

.name {
    color: #369;
    font-weight: bold;
}

.content {
    height: 100%;
}

＆＃13;

<div id="content">
  <div id="talkTab">
    <div id="dialogInterface">
      
      <div class="t_message">
	    <div class="b_message">
	      <div class="time">	
	        23:61
	      </div>
	      <div class="name">
	        John Doe
          </div>
          <div class="c_message">
            Blah blah blah! Blah blah blah! Blah blah blah! Blah blah blah! Blah blah blah! Blah blah blah! 
		  </div>
        </div>
	  </div>
      
      <div class="t_message my_t_message">
	    <div class="b_message">
	      <div class="time">	
	        23:61
	      </div>
	      <div class="name">
	        My Account
          </div>
          <div class="c_message">
            Hi, guys...
		  </div>
        </div>
	  </div>
      
      <div class="t_message">
	    <div class="b_message">
	      <div class="time">	
	        23:61
	      </div>
	      <div class="name">
	        John Doe
          </div>
          <div class="c_message">
            It is message #2.
		  </div>
        </div>
	  </div>
      
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过添加以下样式来阻止name类包装：

.name {
  white-space: nowrap;
  overflow: auto;
}

<强>段：

＆＃13;

＆＃13;

.time {
    float: right;  
}

.t_message {
    display: inline-block;
    padding: 10px;
    border-radius: 17px;
    background: #e8e8f8;
    clear: both;
    margin: 13px 11px 0 11px;
}

.t_message .time {
    margin-left: 10px;
    margin-left	: 20px;
}

.my_t_message {
    text-align: right;
    float: right;
}

.my_t_message .avatar {
    float: right;
    margin-left: 10px;
}

.my_t_message .time {
    float: left;
    margin-left: 0;
    margin-right: 10px;
}

.name {
    display: block;
}

.b_message {
    overflow: hidden;
}

.t_message .avatar {
    margin-right: 7px;
}

.name {
  color: #369;
  font-weight: bold;
  white-space: nowrap;
  overflow: auto;
}

.content {
    height: 100%;
}

＆＃13;

<div id="content">
  <div id="talkTab">
    <div id="dialogInterface">
      
      <div class="t_message">
	    <div class="b_message">
	      <div class="time">	
	        23:61
	      </div>
	      <div class="name">
	        John Doe
          </div>
          <div class="c_message">
            Blah blah blah! Blah blah blah! Blah blah blah! Blah blah blah! Blah blah blah! Blah blah blah! 
		  </div>
        </div>
	  </div>
      
      <div class="t_message my_t_message">
	    <div class="b_message">
	      <div class="time">	
	        23:61
	      </div>
	      <div class="name">
	        My Account
          </div>
          <div class="c_message">
            Hi, guys...
		  </div>
        </div>
	  </div>
      
      <div class="t_message">
	    <div class="b_message">
	      <div class="time">	
	        23:61
	      </div>
	      <div class="name">
	        John Doe
          </div>
          <div class="c_message">
            It is message #2.
		  </div>
        </div>
	  </div>
      
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我替换了一些代码，因为我无法使用现有代码。我相信这就是你要找的东西。主要问题似乎是将inline-block上的t_message替换为float: left;

<强> JSFiddle

    span {
        display: inline-block;
        vertical-align: middle;
    }
    .t_message {
        float: left;
        padding: 10px;
        border-radius: 17px;
        background: #e8e8f8;
        margin: 13px 11px 0 11px;
        clear: both;
    }
    .t_message .time {
        margin-left: 10px;
        margin-left : 20px;
    }
    .my_t_message {
        float: right;  
    }
    .my_t_message .avatar {
        float: right;
        margin-left: 10px;
    }
    .t_message .avatar {
        margin-right: 7px;
    }
    .name {
        color: #369;
        font-weight: bold;
    }
    .c_message {
        margin-top: 5px;
    }
    .content {
        height: 100%;
    }

<div id="content">
        <div id="talkTab">
            <div id="dialogInterface">
                <div class="t_message">
                   <div class="b_message">
                       <span class="name">John Doe</span>
                       <span class="time">23:61</span>
                       <div class="c_message">Blah blah blah! Blah blah blah!</div>
                   </div>
                </div>
                
                <div class="t_message my_t_message">
                    <div class="b_message"> 
                        <span class="name">My Account</span>
                        <span class="time">23:61</span>
                        <div class="c_message">Hi, guys...</div>
                    </div>
                </div>
                
                <div class="t_message"> 
                    <div class="b_message"> 
                        <span class="name">John Doe</span>
                        <span class="time">23:61</span>
                        <div class="c_message">It is message #2.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>