Question

首先，我对CSS非常陌生，所以也许这很简单，但我试过没有成功，所以我决定在这里问，因为其他答案对我不起作用（使用float：right等）:(

我正在使用this pen进行whatsapp聊天。但我喜欢bubble-alt显示在浏览器的右侧，无论它的大小如何。我尝试使用float属性，如下所示：

.speech-wrapper .bubble {
  width: 240px;
  height: auto;
  display: block;
  background: #f5f5f5;
  border-radius: 4px;
  box-shadow: 2px 8px 5px #000;
  position: relative;
  margin: 0 0 0 0;
  float: left;
} 
.speech-wrapper .bubble.alt {
   margin: 0 0 0 60px;
   float: right;
}

但是当我尝试它时，它是一团糟，而且气泡都在屏幕周围。此外，我尝试在右侧添加保证金，但它没有保证金。它来到左边。

有没有办法让＃34;正常＆＃34;屏幕左侧的气泡显示和＆＃34; alt＆＃34;在右边泡沫？

Answer 1

alt的余量应设置为margin-left auto。这是经过修改的pen

.bubble{
  width: 240px;
  height: auto;
  display: block;
  background: #f5f5f5;
  border-radius: 4px;
  box-shadow: 2px 8px 5px #000;
  position: relative;
  margin: 0 0 25px;
  &.alt{
    margin-left: auto; <--- here
  }

Answer 2

您可以简单地添加：

.speech-wrapper .bubble.alt {
    float: right;
}
.bubble {
  clear: both;
}

https://codepen.io/anon/pen/dzVPNj

（clear: both;确保所有气泡彼此

CSS让div显示在右侧

2 个答案: