[英]CSS make div show on the right side
首先,我是CSS的新手,所以也许这很简单,但是我尝试没有成功,所以我决定在这里问一下,因为其他答案对我不起作用(使用float:right等) ):(
我正在用这支笔进行whatsapp聊天。 但我希望气泡大小显示在浏览器的右侧,无论它的大小如何。 我尝试使用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。 这是一支改良的笔
.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;
确保所有气泡都在下面 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.