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

Question

我希望第一个div与右边对齐,如果我使用float右边它会将第二个div放在我不想要的同一行上,我的目的是让第一个div对齐到右边而不会丢失它的块级别在聊天应用程序中 任何帮助将不胜感激..谢谢

注意:我使用display inline-block只是因为我希望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将左边的气泡元素带到欲望的位置.