CSS使div显示在右边

问题描述：

首先，我对CSS完全是新的，所以也许这很简单，但我试过没有成功，所以我决定在这里问，因为其他答案没有， T为我工作（使用浮动：右，等等）:(CSS使div显示在右边

我使用this pen做一个whatsapp聊天。但我想泡泡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; 
}

但是当我尝试它，它是一个烂摊子，气泡都在屏幕上另外，我尝试在右侧添加保证金，但这就像没有保证金。它出现在左边。

有什么办法可以让屏幕左侧的“正常”气泡显示和右侧的“alt”气泡显示？

你需要显示完整的标记来显示问题，而不是CodePen：[m CVE] – Rob

答

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 
    }

答

你可以简单地补充一点：

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

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

（该clear: both;确保所有的泡沫都低于对方）

CSS使div显示在右边

相关推荐