将图标和图像对齐，textarea向左（twitter-Bootstrap）

Question

TL; DR ：在您阅读任何内容之前，所需的最终结果如下图所示，否则请参阅JSFiddle。 最好，我想只使用CSS而不是修改DOM结构。

图标必须完全对齐（因此.pull-right），但图标必须垂直堆叠（有时一些图标不得出现，因此它们是{{1 }，就像第二行中的.hidden图标一样。）

（当我说'图标'表示.fa-undo标签和<i>标签）

图标不得使textarea失效（textarea顶部没有边距）。

希望textarea的WIDTH是动态的，而不是静态地放到<img>。它应该占用尽可能宽的宽度，而不会干扰垂直图标堆栈。

这是我想要的最终结果（在一个完美的世界中，这将使用CSS和我提供的相同HTML DOM完成）

Answer 1

通常，作为UI元素而非内容的图像应该是CSS背景，而不是内嵌图像。然后使用类名来控制图像内容。

你应该这样做，或类似的东西：

td.fr {
   background-image:url(/images/fr.gif);
   background-repeat:no-repeat;
   background-position: top right;
}

按钮也一样。使用<button>并设置背景样式。

Answer 2

不完全是你想要的我害怕，但这就是我实现这一目标的方式：

fiddle

<div class="pull-right icons">
    <img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
    <i class="fa fa-reply"></i>
</div>

td .icons{
    width:20px;
    text-align:center;
}

  

这是我想要的最终结果（在一个完美的世界中，这将使用CSS和我提供的相同HTML DOM完成）

如果不添加另一个右拉容器，我无法做到这一点，我担心只用CSS做这件事最终会成为一个奇怪的黑客

Answer 3

修正了这里：http://jsfiddle.net/QTXxp/2/

当我提出这个问题时缺少的是clear:right;以及使用<div>（或display: block;）

这是CSS（如果你懒得打开JSFiddle），在div.icons上添加了boostrap类pull-right

textarea.hover-edit {
    width: 90% !important;
}

div.icons {
    width: 10% !important;
}

div.icons > div > i.fa {
    margin-top: 4px;
    margin-right: 4px;
}

div.icons > div.action-icon-right {
    float:right;
    clear:right;
}