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; }发生碰撞1}}

<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

这就是我想要的

编辑：使用否定左侧不是解决方案，const decimal multiplicator = 0.02; double number; if (Double.TryParse(TextBox.Text, out number)) { var result = number * multiplicator; //do what you want with the result ;) }else { //TextBox.Text is not a valid number! }的内容可能会有所不同，因此数字越大，它就会再次搞砸并发生碰撞！

Answer 1

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

＆＃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;

<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>

＆＃13;

Answer 2

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

避免使用内联样式。

＆＃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;

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

＆＃13;

Answer 3

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

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

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

Answer 4

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

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

FIDDLE DEMO HERE

Answer 5

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

Answer 6

我建议使用flexbox：

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

这是demo

Answer 7

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

＆＃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;

<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>

＆＃13;

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

7 个答案: