html - 使 div 宽度缩放到内容的宽度

Question

我在看这个例子：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_chat

并且有兴趣更改它，因此消息容器的最大宽度是它的内部内容（文本的长度）。目前消息容器填满了正文的宽度。

我一直在尝试许多显示方法等，但是我一直无法得到想要的结果。

Answer 1

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

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

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

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

.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}

.section {
  padding: 20px;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

.container {
  margin-left: 0;
  margin-right: auto;
}

.container.darker {
  margin-left: auto;
  margin-right: 0;
}

<section class="section">
  <div class="container">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
  <p>Hello. How are you today?</p>
  <span class="time-right">11:00</span>
</div>

  <div class="container darker">
    <img src="https://www.w3schools.com/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
    <p>Hey! I'm fine. Thanks for asking!</p>
    <span class="time-left">11:01</span>
  </div>

  <div class="container">
    <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
    <p>Sweet! So, what do you wanna do today?</p>
    <span class="time-right">11:02</span>
  </div>

  <div class="container darker">
    <img src="https://www.w3schools.com/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
    <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
    <span class="time-left">11:05</span>
  </div>
</section>

Answer 2

只需添加 display:inline-flex 即可解决您的问题，但您可能仍需要在每个容器的末尾添加 clearfix div 这里是帮助您的工作示例。希望对您有所帮助

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

.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  display:inline-flex;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
  direction:rtl;
}

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

.container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

<h2>Chat Messages</h2>

<div class="container clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
  <p>Hello. How are you today?</p>
  <span class="time-right">11:00</span>
</div>
<div id="clearfix"></div>
<div class="container darker clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
  <p>Hey! I'm fine. Thanks for asking!</p>
  <span class="time-left">11:01</span>
</div>
<div id="clearfix"></div>
<div class="container clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
  <p>Sweet! So, what do you wanna do today?</p>
  <span class="time-right">11:02</span>
</div>
<div id="clearfix"></div>
<div class="container darker clearfix">
  <img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
  <p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
  <span class="time-left">11:05</span>
</div>
<div id="clearfix"></div>