聊天框中的Css对齐

Question

​

​

我在对齐app.The发送方和接收方的聊天框时遇到了问题。

下面是每个块上使用的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

为白色和蓝色块分配单独的< div >

下面是证明这一点的代码。

​

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

​

Answer 2

增加值边距尝试使用边距-底边距给块的外侧留出空格