css - 如何将一个内容 block 移动到另一个 block 的右侧而不在 DOM 中移动它

Question

这可能会插入 CSS 的功能(或显示我的全部局限性)。我这里有一些 HTML 和 CSS:

http://jsbin.com/janujolofu/1/edit?html,css,output

看起来像这样:

我希望 12.50 的值看起来像这样(即移动到 .jt-header 的右侧 50px 左右):

这在 CSS 中可行吗？我该怎么做？理想情况下，我希望 .jt-price 保留在 .jt-header 中，因为这是 HTML，而不是在 DOM 中移动它。

Answer 1

使用绝对位置，然后在其父容器上使用相对位置来设置引用点:

.jt-item-price {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 70px;
}
.jt-row {
    position: relative;
}