首先,我对 CSS 完全陌生,所以也许这很简单,但我试过但没有成功,所以我决定在这里问,因为其他答案对我不起作用(使用 float:对等):(
我正在使用 this pen进行 whatsapp 聊天。但我希望 bubble-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”气泡显示在右侧?
最佳答案
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
}
关于html - CSS使div显示在右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45665435/