html - css 使 imageicon 与文本一起下移

Question

我正在尝试这样做，

当仅具有单行“x”图标的文本也在同一行上但具有两行或多行“x”图标的文本也想在最后一行移动时。

http://jsfiddle.net/V6H67/

1)

This is text to test         x

2)

This is test to test
this is second line          x

我正在尝试这个，

css:

.leftalign {
   float: left;
 }
.rightalign{
 float: right;
 }

.mainWrap{
  width: 100%;
}

.removeWrap {
  width: 100%;
}

Html:
<div class="mainWrap">
   <div class="title leftalign">
      This is test to test
      this is second line  
        <div class="removeWrap rightalign">
          <a href="" class="CloxeIcon">x</a>
        </div>
    </div> 
</div>

通过使用这个我得到，

This is test to test this is second line this is 
third line this is fourth line this is fifth line new 
line                                                x

问题是“x”图标现在位于“新”字下方

我想喜欢这个，所有文字都应该在左侧，图标在右侧

This is test to test this second line this  is 
third line this is fourth line this is fifth 
line new line                                    x

Answer 1

试图弄清楚文本占用了多少行是失败的，至少直接是失败的。

但是，您可以根据元素的高度破解一个功能解决方案......行越多，元素就会变得越高。

你可以通过几种方式做到这一点......但这似乎是最简单的。

尝试：

.mainWrap
{
  position:relative;
  width: 100%;
}

这允许绝对定位图标，如下所示：

.rightalign
{
    position:absolute;
    right:0;
    top:25%;
}

这对我的测试有效……当然，您也可以根据自己的喜好调整“顶部”位置。

它还覆盖了 .rightalign 对图标的影响，这就是设置 right:0 的原因。

您的代码中的一些小注释...

...如果你想强制它们成为两条线，你可以在它们之间添加一个 br 。

...此外，这会将图标发送到屏幕的最右侧。这是因为您没有在包含这些内容的 div 上明确设置宽度。如果您不确定 div 的宽度，您也可以通过 max-width 设置这些宽度。

希望能帮助到你。

Answer 2

HTML：

<div class="mainWrap">
    <div class="title leftalign">
    This is test to test this is second line 
    </div> 
    <div class="removeWrap rightalign">
       <a href="" class="CloxeIcon">x</a>
   </div>
</div>

CSS：

.leftalign {
   display: inline-block;
   width: 125px;
}
.rightalign{
   display: inline-block;
   vertical-align: bottom;
}
.mainWrap{
  width: 100%;
}

Answer 3

我可以考虑使用如下的相对和绝对定位。
<div class="mainWrap">
This is test to test
this is second line
<a href="" class="CloxeIcon">x</a>
</div>

和CSS
.mainWrap{
position: relative;
}
.mainWrap a{
position: absolute;
display: block;
bottom: 0;
right: 0;
}

Answer 4

像那样？jsFiddle

<div class="two_columns">

    <div class="left_column">
        This is test to test<br>
        This is another line
    </div>
    <div class="right_column">
        x
    </div>
</div>

和CSS：

.two_columns>div {
    display: inline-block;
    vertical-align: left;
}
.right_column {
    margin-left: 5px;
}