css - 如何在容器内从右向左浮动 DIV？ (不能使用绝对位置 + 右 :0)

Question

我有以下代码:

html:

<div class=container1>
  <div class=container2>
    <div class="box">
       test
    </div>
  </div>
  <div class=container2>
    <div class="box">
       test
    </div>
  </div>
  <div class=container2>
    hover
    <div class="box">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
  </div>
</div>

CSS:

.container1 {
  background: yellow;
  height: 300px;
  position: relative !important;
  width: 500px
}

.container2 {
  background: blue;
  border: solid;
  float: left !important;
  height: 200px;
  /*position: relative; can't use, as it would limit icons inside this container*/
  width: 110px;
  }
.container2:hover .box {
  display: block;
}

.box {
    border: solid;
    display: none;
    width: auto;
    height: 100px;
    background: red;
    position:absolute;
    top: 50px;
    /*right:0;*/
}
.icon{
  background: white;
  border: solid;
  float: left;
  width: 30px !important;
  height: 30px !important;
}

http://jsfiddle.net/tombrito/81oq7mde/8/

有没有办法让 .icon 元素向左展开，而不是向右展开？

我不能使用 position:absolute + right:0，因为它们会脱离 .container2。而且我不能制作 container2 position:relative，因为它会限制其中的图标。

Answer 1

好的，direction 似乎是反转布局行为的东西:

.container1 {
  background: yellow;
  height: 300px;
  position: relative !important;
  width: 500px
}

.container2 {
  background: blue;
  border: solid;
  float: left !important;
  height: 200px;
  direction:rtl;
  width: 110px;
  }
.container2:hover .box {
  display: block;
}

.box {
    border: solid;
    display: none;
    width: auto;
    height: 100px;
    background: red;
    position:absolute;
    top: 50px;
    /*right:0;*/
}
.icon{
  background: white;
  border: solid;
  float: left;
  width: 30px !important;
  height: 30px !important;
}

<div class=container1>
  <div class=container2>
    <div class="box">
       test
    </div>
  </div>
  <div class=container2>
    <div class="box">
       test
    </div>
  </div>
  <div class=container2>
    hover
    <div class="box">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
  </div>
</div>