7 个答案:
答案 0 :(得分:1)
您可以使用flexbox实现这一目标,并删除clear和float
避免使用内联样式。


* {
font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial;
}
.wrap {
width: 480px;
background: yellow;
padding: 1em
}
.mw {
position: relative;
display: flex;
justify-content: flex-end
}
.msg {
background-color: #D80000;
color: white;
padding: 0.66em;
border-radius: 1em;
}
span {
display: inline-block;
align-self: flex-end
}
100000
答案 1 :(得分:1)
您可以使用transform: translateX(-100%)并将span向左移动等于其宽度。


* {
font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial;
}
.mw {
display: inline-block;
float: right;
position: relative;
}
.msg {
float: right;
background-color: #D80000;
color: white;
padding: 0.66em;
border-radius: 1em;
}
.uns {
position: absolute;
bottom: 0;
transform: translateX(-100%);
}
0
答案 2 :(得分:0)
如果没有特殊原因可以使用position: absolute,您可以使用此功能。
.uns {
position: relative;
float: left;
padding-right: 10px;
margin-top: 20px;
}
答案 3 :(得分:0)
添加" margin-left:-15px; "在.uns类样式中。
答案 4 :(得分:0)
??回答迟到了,但vertical-align,text-align + inline-block如何启动一些float呢?因为它只是短语内容?


* {
font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial;
}
.mw {
display: inline-block;
float: right;
position: relative;
text-align: right;
}
.msg {
background-color: #D80000;
color: white;
padding: 0.66em;
border-radius: 1em;
display: inline-block;
}
.uns {
vertical-align: -1em;
display: inline-block;
}
[style] {overflow:hidden;/* clear in 'n outsider floats */}
0
10 000 000 00
10 000
+ it can wrap too
答案 5 :(得分:0)
我建议使用flexbox:
.mw {
display: flex;
align-items: flex-end; // Align to the bottom
// rest of the code
}
答案 6 :(得分:0)
只需将左:-20px添加到您的班级。
.uns {
position: absolute;
bottom: 0;
left : -20px;
}