如何以訊息樣式格式對齊？-有解無憂

我正在嘗試重現訊息執行緒格式。一個從螢屏左側開始的容器（傳入訊息）和另一個從螢屏右側開始的容器（傳出訊息）。目前，這兩個容器都位于頁面中心，并且其中的文本列印正確（分別為左側和右側）。我不想改變文本位置，只改變容器位置。理想情況下，我希望它看起來像這樣：

                                             
          Container                          
                                             
                                             

                                                                           
                                                          Container darker

到目前為止，這是我的代碼：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,">
<meta charset="UTF-8">
<style>
body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

</style>
</head>
<body>

<h2>Chat Messages</h2>

<div class="container">
<p>'(123)456-7890'</p>
<p>'Hello!'</p>
<p>'10/10/2022 @ 15:00:00'</p>
</div>

<div class="container darker">
<p>'(123)456-0987'</p>
<p>'Hi!'</p>
<p>'10/10/2022 @ 15:00:07'</p>
</div>

</body>\n
</html>

uj5u.com熱心網友回復：

只需在您想要空間的一側設定邊距。

但是你應該使用描述元素代表什么的類名，而不是它的外觀。

body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.message {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.outgoing {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right;
  margin-left: 20%;
}

.incoming {
  margin-right: 20%;
}

<h2>Chat Messages</h2>

<div class="incoming message">
  <p>'(123)456-7890'</p>
  <p>'Hello!'</p>
  <p>'10/10/2022 @ 15:00:00'</p>
</div>

<div class="outgoing message">
  <p>'(123)456-0987'</p>
  <p>'Hi!'</p>
  <p>'10/10/2022 @ 15:00:07'</p>
</div>

uj5u.com熱心網友回復：

您可以在父元素（在這種情況下，我已經創建div.wrapper）上使用帶有列方向的 CSS flexbox，然后align-self: flex-end用于您想要正確對齊的元素。

為確保訊息是“收縮包裝”，您可以選擇width: fit-content在指定最大寬度的基礎上使用：

.wrapper {
  display: flex;
  flex-direction: column;
}

.message {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  max-width: 65%;
  width: fit-content;
}

.message.align-right {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right;
  align-self: flex-end;
}

<div class="wrapper">
  <div class="message">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed pretium sem, et blandit quam.
  </div>
  <div class="message align-right">
    Sed et ullamcorper magna.
  </div>
  <div class="message">
    Nullam vulputate turpis lorem, id malesuada purus consectetur quis.
  </div>
  <div class="message">
    Phasellus mattis ante dolor, sit amet blandit enim rhoncus id.
  </div>
  <div class="message align-right">
    Aenean eu mauris ac sem blandit mollis. Praesent feugiat ex vel risus vulputate, vitae dictum ex posuere.
  </div>
</div>

uj5u.com熱心網友回復：

使用樣式將所有容器包裝在另一個 div 中（使用 class thread）
在容器類中定義一個小于 100% 的寬度
align-self在較暗的類中定義

<head>
  <!-- ... -->
  <style>
    /* ... */
    .thread {
      display: flex;
      flex-direction: column;
    }
    .container {
      /* ... */
      width: 80%;
    }
    .darker {
      /* ... */
      align-self: flex-end;
    }
    /* ... */
  </style>
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div class="thread">
    <div class="container">
      <!-- ... -->
    </div>
    <div class="container darker">
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/516336.html

標籤：htmlcss

上一篇：如何移動divonkeypressHTMLCSSJavascript

下一篇：如何使像這張圖片的div居中？[復制]