html - DIV 位置和对齐问题

Question

我正在尝试按照下面的附件创建一个聊天窗口:

这是我在 JSFiddle 中创建的:

我正在尝试制作蓝色的 DIV，其中付款信息位于中间，顶部的 div 位于左侧，我可以轻松地制作左侧的第一个 div，但无法带来付款 DIV 在中间，不知道我错过了什么

代码也是这样

 

<style>
.chat_widget_body{float:left; width:100%; min-height:550px; padding:25px; box-sizing:border-box;}
.chat_widget_bubble_green{background:#c5d6b6; float:left; display:inline-block; padding:15px; border-radius:6px; position:relative;font-family: "Montserrat-Regular"; font-size:15px; font-weight:400; color:#404040;}
.chat_widget_bubble_green:after {right: 100%; top: 70%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(197, 214, 183, 0); border-right-color: #c5d6b7; border-width: 12px; margin-top: -12px;}
.chat_widget_bubble_green > .msg_time{font-size:11px; float:left; width:100%; text-align:right; padding:10px 10px 0 10px; box-sizing:border-box; color:#6f6f6f;}
.chat_widget_notification{display:inline-block; margin:0 auto; padding:10px; border-radius:6px; font-family: "Montserrat-Regular"; font-size:15px; background:#d9efff; border:1px solid #b7ccdb; color:#404040; clear:both;}
.chat_widget_footer{float:left; width:100%;}
</style>

<div class="chat_widget_body">
  <div class="chat_widget_bubble_green"> Too much headache since last night. Please guide me
    <div class="msg_time">Today | 11:00 am <i class="fa fa-check" aria-hidden="true"></i></div>
  </div>
  <div class="chat_widget_notification">Payment of Rs. 330.00 Received</div>
</div>
<div class="chat_widget_footer"></div>

Answer 1

您需要在 .chat_widget_notification 中设置 float: right，并进行一些调整

编辑 OP评论:

can we make that blue box centered?

设置 display:block 而不是 inline-block 并在你的 .chat_widget_notification 中提供一些 width

.chat_widget_body {
  float: left;
  width: 100%;
  min-height: 550px;
  padding: 25px;
  box-sizing: border-box;
  border: dashed black 1px
}
.chat_widget_bubble_green {
  background: #c5d6b6;
  float: left;
  display: inline-block;
  padding: 15px;
  border-radius: 6px;
  position: relative;
  font-family: "Montserrat-Regular";
  font-size: 15px;
  font-weight: 400;
  color: #404040;
  width: 70%;
  margin: 10px 0
}
.chat_widget_bubble_green:after {
  right: 100%;
  top: 70%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(197, 214, 183, 0);
  border-right-color: #c5d6b7;
  border-width: 12px;
  margin-top: -12px;
}
.chat_widget_bubble_green > .msg_time {
  font-size: 11px;
  float: left;
  width: 100%;
  text-align: right;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  color: #6f6f6f;
}
.chat_widget_notification {
  display: block;
  width: 40%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 6px;
  font-family: "Montserrat-Regular";
  font-size: 15px;
  background: #d9efff;
  border: 1px solid #b7ccdb;
  color: #404040;
  clear: both;
}
.chat_widget_footer {
  float: left;
  width: 100%;
}
</style>

<div class="chat_widget_body">
  <div class="chat_widget_bubble_green">Too much headache since last night. Please guide me
    <div class="msg_time">Today | 11:00 am <i class="fa fa-check" aria-hidden="true"></i>
    </div>
  </div>
  <div class="chat_widget_notification">Payment of Rs. 330.00 Received</div>
  <div class="chat_widget_bubble_green">Too much headache since last night. Please guide me
    <div class="msg_time">Today | 11:00 am <i class="fa fa-check" aria-hidden="true"></i>
    </div>
  </div>
  <div class="chat_widget_notification">Payment of Rs. 330.00 Received</div>
</div>
<div class="chat_widget_footer"></div>