html - 向右移动元素但保持它们在 HTML 中的顺序？

Question

我需要一些元素按照它们在 HTML 中出现的顺序水平排列。我需要他们移动到容器的右侧。

如果我将元素向右浮动，那么顺序就会改变。

如果我显示为行内 block 并使容器的文本右对齐，则它们之间有空格。

我可以更改 HTML，但我无法删除所有空白区域(这可能会解决内联 block 的问题)。这能解决吗？

http://codepen.io/anon/pen/xbLbLE

<div class="cont">
  <div class='itemA'>1</div>
  <div class='itemA'>2</div>
  <div class='itemA'>3</div>
  <div class='itemA'>4</div>
</div>

<div class="cont contB">
  <div class='itemB'>1</div>
  <div class='itemB'>2</div>
  <div class='itemB'>3</div>
  <div class='itemB'>4</div>
</div>

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}

.itemA {
  background: green;
  float: right;
}

.contB {
  text-align: right;  
}

.itemB {
  background: red;
  display: inline-block;
}

Answer 1

将需要按正确顺序排列的元素向左浮动，并将其容器向右浮动。

HTML

<div class="cont">
     <div class='itemA'>1</div>
     <div class='itemA'>2</div>
     <div class='itemA'>3</div>
     <div class='itemA'>4</div>
</div>
<div class="cont contB">
     <div class='itemB'>1</div>
     <div class='itemB'>2</div>
     <div class='itemB'>3</div>
     <div class='itemB'>4</div>
</div>

CSS

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}
.itemA {
  background: green;
}
.itemB {
  background: red;
}
.cont {
    float: right;
}
.cont div {
    float: left;
}

和 jsFiddle:http://jsfiddle.net/enaeLr60/

如您所见，使用 display: inline-block 的缺点是每个内联 block 之间的任何空间都将呈现为单个空间。我更喜欢 float 元素来解决这个问题，而不是像下面这样的选项，因为它们不受欢迎。

1. <div>1</div><div>2</div> - 元素之间没有间隔
2. <div>1</div><!-- comment block --><div>2</div> - 之间的评论 元素
3. 使用负边距

更新

我的原始答案忘记在 .cont 周围包含一个包装器DIV。结果，带有 .itemA 的 DIV出现在 .itemB 之后DIV。请参阅更新的代码以更正此问题。

HTML

<div class="list-container">
     <div class="cont">
         <div class='itemA'>1</div>
          <div class='itemA'>2</div>
          <div class='itemA'>3</div>
          <div class='itemA'>4</div>
     </div>
     <div class="cont contB">
          <div class='itemB'>1</div>
          <div class='itemB'>2</div>
          <div class='itemB'>3</div>
          <div class='itemB'>4</div>
     </div>
</div>

CSS

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}
.itemA {
  background: green;
}
.itemB {
  background: red;
}
.list-container {
    float: right;
}
.cont,
.cont div {
    float: left;
}

更新了 jsFiddle:http://jsfiddle.net/enaeLr60/1