如何将内容块移动到另一个块的右侧而不在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，而不是做一些jQuery monkeying在DOM中移动它。

Answer 1

使用绝对位置，然后在其父容器上使用位置相对来设置参考点：

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

Answer 2

display：table可能是你的朋友：

＆＃13;

＆＃13;

.jt-header {
  display:table;
}
.jt-item-price {
  display:table-cell;width:50%;
}
div {/* demo purpose */
  border:solid;
  padding:5px;
  margin:5px;
}

＆＃13;

<div class='jt-container'>
  <div class='jt-row'>
    <div class='jt-circle'>
    </div>
    <div class='jt-header'>
      here is a header 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text
      <div class='jt-item-price'>
        12.50
      </div>
    </div>
  </div>
</div> 

＆＃13;

＆＃13;

＆＃13;

但你的HTML结构应该重新考虑，使用less，然后看看如何通过CSS样式:)