css 让div向右对齐,CSS将对齐范围向右对齐的div对齐

7 个答案:

答案 0 :(得分：1)

您可以使用flexbox实现这一目标，并删除clear和float

避免使用内联样式。

＆＃13;

＆＃13;

* {

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

}＆＃13;

100000

Some content

＆＃13;＆＃13;＆＃13;

答案 1 :(得分：1)

您可以使用transform: translateX(-100%)并将span向左移动等于其宽度。

＆＃13;

＆＃13;

* {

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%);

}＆＃13;

0

Some content

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：0)

如果没有特殊原因可以使用position: absolute，您可以使用此功能。

.uns {

position: relative;

float: left;

padding-right: 10px;

margin-top: 20px;

}

答案 3 :(得分：0)

添加＆＃34; margin-left：-15px; ＆＃34;在.uns类样式中。

答案 4 :(得分：0)

??回答迟到了，但vertical-align，text-align + inline-block如何启动一些float呢？因为它只是短语内容？

＆＃13;

＆＃13;

* {

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 */}＆＃13;

0

Some content

---

10 000 000 00

Some content

---

10 000
+ it can wrap too

Some content

＆＃13;＆＃13;＆＃13;

答案 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;

}