如何正確對齊div與顯示行內塊？

我想要第一個div對齊到右邊，如果我使用float float，它會將第二個div放在我不想要的同一行上，我的目標是讓第一個div對齊而不會丟失它的塊級別在聊天應用程序中。任何幫助將不勝感激。。感謝如何正確對齊div與顯示行內塊？

注：我使用的顯示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>

來源

2014-11-21 Muhammad

一種解決方案是使用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帶來左泡沫元件到希望的位置。

來源

2014-11-21 22:28:48

感謝的人你的偉大的工作:) – Muhammad 2014-11-21 22:44:46

高興我幫你:) – 2014-11-21 22:46:55

您可以將它們放在兩個容器中，然後應用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>

來源

2014-11-21 22:29:03

感謝的人對你的幫助:) – Muhammad 2014-11-21 22:46:51

這樣做的實質部分是下面的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>

來源

2014-11-21 22:32:00

感謝親愛的您的幫助:) – Muhammad 2014-11-21 22:45:18

如何正確對齊div與顯示行內塊？

回答

相關問題