試圖讓自舉崩潰打開從右向左水平

Question

我有這個fiddle在這裏，我想從右側開放到左側的內容崩潰。這可能嗎？

.collapse { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
.collapse.in { 
 
    display: block; 
 
    visibility: visible; 
 
} 
 
tr.collapse.in { 
 
    display: table-row; 
 
} 
 
tbody.collapse.in { 
 
    display: table-row-group; 
 
} 
 
.collapsing { 
 
    position: relative; 
 
    height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition-property: height, visibility; 
 
    transition-property: height, visibility; 
 
    -webkit-transition-duration: 0.35s; 
 
    transition-duration: 0.35s; 
 
    -webkit-transition-timing-function: ease; 
 
    transition-timing-function: ease; 
 
} 
 
.collapsing.width { 
 
    -webkit-transition-property: width, visibility; 
 
    transition-property: width, visibility; 
 
    width: 0; 
 
    height: auto; 
 
}

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 
 
    Horizontal Collapsible 
 
</button> 
 

 
<div id="container" style="width:300px;height:400px;border:1px solid black;"> 
 
    <div id="demo" class="collapse in width" style="background-color:yellow;"> 
 
    <div style="padding: 20px; overflow:hidden; width:300px;"> 
 
     Here is my content 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

DEMO

只需添加float:right您element-#demo如下：

<div id="demo" class="collapse in width" style="background-color:yellow;float:right;"> 

注意 - 這會給你一些過度流量問題，我希望你能夠修復它，因爲寬度和高度是由你預先定義的