如何在左侧打开（展开）块元素？

Question

可以说我有那些固定的位置，看起来像这样在一个窗口2个元素：

-------------- 
|  xxx | 
|  xxx | 
|   | 
|  xxx | 
|  xxx | 
|   | 
-------------- 

我想要的元素扩展到左侧上悬停，像这样：

-------------- 
|  xxx | 
|  xxx | 
|   | 
|  xxxxxx | 
|  xxxxxx | 
|   | 
-------------- 

但是，现在它向右扩展。工作示例可以在这里看到：https://jsfiddle.net/eeuho5vq/2/

任何解决方案将不胜感激。

Answer 1

在父级上使用display: flex; flex-direction: column; align-items: flex-end;，并将元素向右对齐。

\t $(".container").each(function(){ 
 
\t \t $(this).hover(function(){ 
 
\t \t \t $(this).toggleClass("show"); 
 
\t \t }) 
 
\t })

#wrapper { 
 
    position: fixed; 
 
    right: 1em; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 

 
.container { 
 
    width: 2em; 
 
    height: 2em; 
 
    background: yellow; 
 
    margin: 1em 0; 
 
} 
 

 
.container.show { 
 
    width: 4em; 
 
    height: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="container"> 
 
    <!--element 1--> 
 
    </div> 
 
    
 
    <div class="container"> 
 
    <!--element 2--> 
 
    </div> 
 
    
 
</div>

Answer 2

只需添加这.container：

float: right; 
    clear: both; 

更新片段：https://jsfiddle.net/eeuho5vq/3/