如何将 div 与显示内联块右对齐

Question

我希望第一个div向右对齐，如果我使用float right，它将把第二个div放在我不想要的同一行上，我的目标是使第一个div向右对齐而不会像在聊天应用程序中那样丢失其块级别。任何帮助将不胜感激。.谢谢

注意：我使用显示内联块只是因为我希望div 适合内容。

.outer{
  display: block; 
}
.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}
.lbubble{
    background: lightblue;
}
.rbubble{
    background: lightgreen;
}
.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}
.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}

<div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
<div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>

Answer 1

一种解决方案是使用 float: right 和clear: right，如下所示：

.outer {
  display: block;
  clear: right;/*clear float right*/
}
.lbubble,
.rbubble {
  position: relative;
  padding: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 10px 0px #616161;
  box-shadow: 2px 2px 7px 0px #616161;
  display: inline-block;
  margin-bottom: 8px;
}
.lbubble {
  background: lightblue;
}
.rbubble {
  background: lightgreen;
  float: right;/*add float right*/
}
.lbubble:after {
  content: "";
  position: absolute;
  top: 5px;
  left: -8px;
  border-style: solid;
  border-width: 10px 14px 10px 0;
  border-color: transparent lightblue;
  width: 0;
  z-index: 1;
}
.rbubble:after {
  content: "";
  position: absolute;
  top: 5px;
  right: -8px;
  border-style: solid;
  border-width: 10px 0 10px 14px;
  border-color: transparent lightgreen;
  width: 0;
  z-index: 1;
}

<div class='outer'>
  <div class="rbubble">Right Bubble with align right</div>
</div>
<div class='outer'>
  <div class="lbubble">Left Bubble it should be on 2nd line with align left</div>
</div>

使用clear: right将左气泡元素带到所需位置。

Answer 2

您可以将它们放在两个容器中，然后应用float: left和float: right。

.outer{
  display: block; 
}
.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}
.container {
    width: 100%;
    height: 30px;
}
.lbubble{
    background: lightblue;
    float: left;
}
.rbubble{
    background: lightgreen;
    float: right;
}
.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}
.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}

<div class="container">
  <div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
</div>
<div class="container">
  <div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>
</div>

Answer 3

其实质部分是以下 CSS：

.rbubble{
    background: lightgreen;
    margin-left: 100%;
    transform: translateX(-100%);
    word-wrap: avoid-break;
}

我们把它从容器中一直推到右边，然后用transform: translateX(-100%);把它拖回左边。 没有float的凌乱，也不需要额外的包装器。

.outer{
  display: block; 
}
.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}
.lbubble{
    background: lightblue;
}
.rbubble{
    background: lightgreen;
    margin-left: 100%;
    transform: translateX(-100%);
    word-wrap: avoid-break;
}
.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}
.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}

<div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
<div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>