Question

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

注意：我正在使用display inline-block，因为我希望div符合内容。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用clear: right会将左边的气泡元素带到欲望的位置。

Answer 2

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

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

3 个答案: