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

时间:2014-11-25 23:12:28

标签: html css css-float

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

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

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



.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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

我替换了一些代码,因为我无法使用现有代码。我相信这就是你要找的东西。主要问题似乎是将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>