如何在容器内从右到左浮动 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 itens向左扩展，而不是向右扩展？

我不能使用position:absolute+right:0，因为它们会从.container2中退出。我不能制作container2 position:relative，因为它会限制里面的图标

好吧，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>

因为容器都是独立的，所以您无法用float实现您想要的内容，但我相信这里有一个演示，演示您想要的东西。也许不是最好的解决方案，但它有效。

.container2:hover .box {
  display: block;
  margin-left: -195px;
}
.box {
    border: solid;
    display: none;
    width: 300px;
    height: 100px;
    background: red;
    position:absolute;
    top: 50px;
    /*right:0;*/
}
.icon{
  background: white;
  border: solid;
  float: right;
  width: 30px !important;
  height: 30px !important;
}

更改.box

这是一把最新的小提琴。你需要给你的.box增加一个宽度，使其成为float:right

.box {
    border: solid;
    display: none;
    min-width:150px;
    max-width: 300px;
    float:right;
    height: 100px;
    background: red;
    top: 50px;
    /*right:0;*/
}