html - 在保持单独的行的同时在左侧和右侧 float div

Question

下面提供了我的代码，但我遇到了两个问题。

问题 #1: 在第二条消息中，您可以看到“Doe”已移至新行，而不是调整同一行的大小。
问题 #2: 我在我的 .t_message 中 float 了每一行并使用了 clear: both，但是，如您所见，两个 block 是在同一条线上。

为什么以及如何修复它？谢谢。

.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%;
}

<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>

Answer 1

我替换了你的一些代码，因为我无法让它与现有的一起工作。我相信这就是您要找的。主要问题似乎是将 t_message 上的 inline-block 替换为 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>