CSS将对齐范围向右对齐的div对齐

Question

我试图将一个span对齐div左边，它与右边对齐（ float: right ），但是span总是看起来与div冲突

 * { 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; } 

 <div style="width: 480px; background: yellow; padding: 1em"> <div class="mw"> <span class="uns">0</span> <div class="msg">Some content</div> <br style="clear: both"> </div> <br style="clear: both"> </div> 

这就是我想要的

编辑：使用负左不是一个解决方案， span内容可能会有所不同，所以在更大的数字，它将再次搞砸和碰撞！

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

 <div style="width: 480px; background: yellow; padding: 1em"> <div class="mw"> <span class="uns">0</span> <div class="msg">Some content</div> <br style="clear: both"> </div> <br style="clear: both"> </div> 

Answer 2

如果没有特殊原因使用position: absolute ，你可以使用它。

.uns {
  position: relative;
  float: left;
  padding-right: 10px;
  margin-top: 20px;
}

FIDDLE DEMO在这里

Answer 3

你可以使用flexbox实现这flexbox ，并摆脱那些clear s和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 } 

 <div class="wrap"> <div class="mw"> <span class="uns">100000</span> <div class="msg">Some content</div> </div> </div> 

Answer 4

只需添加左：-20px到您的班级。

 .uns {
        position: absolute;
        bottom: 0;
        left : -20px;
    }

看看这个fidlle。 https://jsfiddle.net/y6a77fLp/

Answer 5

在.uns类样式中添加“margin-left：-15px;”。

Answer 6

我建议使用flexbox：

.mw {    
  display: flex;
  align-items: flex-end; // Align to the bottom
  // rest of the code
}

这是一个演示

Answer 7

?? 迟到的回答，但是，对于一些float ， 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 */} 

 <div style="width: 480px; background: yellow; padding: 1em"> <div class="mw"> <span class="uns">0</span> <div class="msg">Some content</div> </div> </div> <hr/> <div style="width: 480px; background: yellow; padding: 1em"> <div class="mw"> <span class="uns">10 000 000 00</span> <div class="msg">Some content</div> </div> </div> <hr/> <div style="width: 480px; background: yellow; padding: 1em"> <div class="mw"> <span class="uns">10 000<br/>+ it can wrap too</span> <div class="msg">Some content</div> </div> </div>