聊天框中的CSS对齐

Question

我在调整应用程序中的聊天框时遇到问题。发件人和收件人的聊天框重叠。

这是每个块上使用的css类

        .white_block
        {
           background-color: #d5dfed; 
           border-radius: 10px; 
           padding: 10px 0 10px 10px; 
           width: 60%; 
           margin-top: 10px;
        }
        .blue_block
        {
            background-color: rgba(0, 150, 255, 1); 
            border-radius: 10px;
            padding: 10px 0 10px 10px;
            width: 60%;
            margin-top: 10px;
            float: right;
        }

预先感谢

Answer 1

为白色和蓝色块分别分配

下面是证明相同的代码。

* {
  font-family: "arial";
  
}

.white_block {
  background-color: #d5dfed;
  border-radius: 10px;
  padding: 10px 0 10px 10px;
  width: 60%;
  margin-top: 10px;
}

.blue_block {
  background-color: rgba(0, 150, 255, 1);
  border-radius: 10px;
  padding: 10px 0 10px 10px;
  width: 60%;
  margin-top: 10px;
  float: right;
}

<div class="white_block">
  <p>The price quoted for the campus is too high please reconsider the price</p>
</div>
<div class="white_block">
  <p>L</p>
</div>
<div class="blue_block">
  <p>This is the best price we can offer</p>
</div>

答案 1 :(得分：-1)

尝试使用边距-底边距增加值边距，为块的外侧留出空间

Answer 2

尝试使用边距-底边距增加值边距，为块的外侧留出空间