Question

以下是我的代码：http://www.codepen.io/anon/pen/DCylg

我在那里有两个聊天气泡。顶部的一个必须向下推到底部，因为有更多的聊天气泡出现，我尝试添加一个带有填充底部的包装来推动div但它什么也没做。

.bubble2{
 float:left 

}
.clearfix{display:block; clear:both;}

.bubblewrap {padding-bottom:15%;position:relative;}

.bubble
{
text-align:left;
color:black;
float:left;
position: absolute;
background: gray;   
border-left: 2px solid #e67e22;
margin-left:51px;
padding:5px;
width:500px;
}

.bubble h4 {text-align:left;font-size:14px;font-weight:bold;font-variant:small-caps;clear:both;margin-bottom:3px;padding:0;margin-top:-5px;color:#2ecc71;}
.bubble span {font:17px/1px "Times New Roman", Times, serif;}

.bubble-img-holder{float:left;}
.bubble-img-holder h4{display:block; float:none; font:12px/12px "Times New Roman", Times, serif;}
.bubble-img-holder h4 {width:50px;overflow-x:auto}

然后是我的Html：

<div class="bubblewrap">
<div class="holder clearfix"> 
<div class="bubble-img-holder"><img src="http://www.placehold.it/51x50" class="bubble2">
<h4 id=" username2" class="chat-listitem-username" data-bind="text: username">USERddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</h4>
  </div>

<div id="userName" class="bubble" style="display:block; float left;" >
<span class="chat-list item-message" data-bind="html: content">SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAM PAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPA<br><br><Br><br><br></span>
</div>
</div>
</div>

<div class="bubblewrap">
<div class="holder clearfix"> 
<div class="bubble-img-holder"><img src="http://www.placehold.it/51x50" class="bubble2">
<h4 id="username2" class="chat-listitem-username" data-bind="text: username">USERddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</h4>
  </div>

<div id="userName" class="bubble" style="display:block; float left;" >
<span class="chat-list item-message" data-bind="html: content">SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAMSPAM SPAM SPAM SPAM SPAM <br><br><Br><br><br></span>
</div>
</div>
</div>

Answer 1

.bubble类的位置是绝对的。他们不尊重文件流。老实说，我甚至不确定你为什么要使用它。

如果删除它，div将开始尊重彼此的位置。

Answer 2

解决方案在此解决：http://www.codepen.io/anon/pen/DCylg

.bubble2{
 float:left 

}
.clearfix{display:block; clear:both;}



.bubble
{border-left: 2px solid #e67e22;
background: gray;   
width:95%;
  left:53px;
  margin-left:52px;
  padding:5px;
  margin-bottom:2%;
}


.bubble-img-holder{float:left;clear:both;display:block;padding:0;margin:0}
.bubble-img-holder h4{display:block; float:none; font:12px/12px "Times New Roman", Times, serif;}
#username2 {width:50px;overflow-x:auto}

<div>没有正确推送其他<div> </div> </div>

2 个答案: