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

时间:2016-05-22 18:45:24

标签: html css

我正在尝试将spandiv左侧对齐,该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

这就是我想要的

This is what I want to reach

编辑:使用否定左侧不是解决方案, 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! } 的内容可能会有所不同,因此数字越大,它就会再次搞砸并发生碰撞!

7 个答案:

答案 0 :(得分: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;
<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;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用flexbox实现这一目标,并删除clearfloat

避免使用内联样式。

&#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;
<div class="wrap">
  <div class="mw">
    <span class="uns">100000</span>
    <div class="msg">Some content</div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

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

FIDDLE DEMO HERE

答案 4 :(得分:0)

添加&#34; margin-left:-15px; &#34;在 .uns 类样式中。

答案 5 :(得分:0)

我建议使用flexbox:

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

这是demo

答案 6 :(得分:0)

??回答迟到了,但vertical-aligntext-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;
<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;
&#13;
&#13;