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

Question

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

如果我将项目向右浮动，则顺序会改变。

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

我可以更改 HTML，但我无法删除所有空白（这可能会解决内联块的问题）。这可以解决吗？

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 的缺点是每个内联块之间的任何空间都将呈现为单个空间。我更喜欢浮动项目来解决这个问题，而不是像下面这样的选项，因为它们不是首选。

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

Answer 2

我不确定我是否正确理解了您的问题，但是您能否给出这个 CSS 并尝试看看它是否是您想要做的。

.cont{
 display:inline;
 float:right
}

.itemA,
.itemB {
 width: 50px;
 height: 50px;
 display: inline-block;
 margin-right:-4px;
}

.itemA:last-child, .itemB:last-child{
  margin-right:0;
 }

.itemA {
 background: green;
}

.contB {
 text-align: right;  
}

.itemB {
 background: red;
}

margin-right:4px 是对display:inline-block; 的一种破解，因此，这可能是不可取的。

Answer 3

我的回答是添加一个包装器：http://codepen.io/anon/pen/KwvwyL

<div class="wrapper">
  <div class="cont contA">
      <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 中：

.wrapper {
  float: right;
}
.contA {
  float: left;
  background: green;
}

.contB {
  float: left;
  background: red;
}

.itemA, .itemB {
  float: left;
}

Answer 4

.itemA,
.itemB {
  width: 50px;
  height: 50px;
  display:inline-block;
}
.itemA { background: green; }
.cont { display:inline-block; word-spacing: -100%; }
.contB { float:right; }
.itemB { background: red; }

CodeOpen