Question

我正在尝试根据以下附件创建聊天窗口：

这是我在JSFiddle中创建的：

我正在尝试将支付信息位于中心的蓝色DIV和左侧的顶部div，我能够轻松地将第一个div放在左边，但是无法支付{{1}在中心，不知道我错过了什么

以下是代码

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>

Answer 1

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

编辑 OP评论：

我们可以让蓝框居中吗？

设置display:block而不是inline-block并在width

中提供一些.chat_widget_notification

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

Answer 2

请尝试以下方法：

您需要在.chat_widget_notification

中设置

.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:block; margin:20% auto; padding:10px 5px; border-radius:6px; font-family: "Montserrat-Regular"; font-size:15px; background:#d9efff; border:1px solid #b7ccdb; color:#404040; clear:both;width:55%;text-align:center;}
.chat_widget_footer{float:left; width:100%;}

＆＃13;

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

＆＃13;

class Student{

    private $name;
    private $roll_no;

    function __construct($name,$roll_no){
        $this->name = $name;
        $this->roll_no = $roll_no;
    }

    public function display(){
        echo "Name :".$this->name;
        echo "<br> Roll No :".$this->roll_no."<br><br>";
    }


    function __toString(){
        $this->display();
    }

}

$std1 = new Student("Bob" , 1);
echo $std1;
$std2 = new Student("John" , 2);
echo $std2;
$std3 = new Student("Tony" , 3);
echo $std3;
$std4 = new Student("Teena" , 4);
echo $std4;

＆＃13;

Answer 3

更改此css

.chat_widget_notification{display:block; width:50%; 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;}

DIV位置和对齐问题

3 个答案: