HTML + JQuery均衡器對齊底部/中部的條形碼

Question

我正在嘗試構建一個非常簡單的HTML/JQuery均衡器。 我無法修復的問題是，將條對齊到底部並展開到頂部。

這裏是我的代碼：

window.setInterval(function(){ 
 
    $('.eqitem').each(function(){ 
 
    $(this).height(Math.floor(Math.random() * 250) + 50); 
 
    }); 
 
}, 500);

.parent{ 
 
    height: 300px; 
 
} 
 

 
.eqitem{ 
 
    float: left; 
 
    height: 0px; 
 
    width: 10px; 
 
    background: darkred; 
 
    margin-right: 5px; 
 
    -webkit-transition: height 0.5s ease-out; 
 
    transition: height 0.5s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div id="eq"> 
 
     <div class="eqitem"></div> 
 
     <div class="eqitem"></div> 
 
     <div class="eqitem"></div> 
 
     <div class="eqitem"></div> 
 
     <div class="eqitem"></div>      
 
    </div> 
 
</div>

我嘗試垂直對齊，絕對和相對定位，底部屬性，... 沒有上面似乎工作，甚至造成不必要的問題。

非常感謝你們的幫助。

Answer 1

您需要混合相對和絕對定位才能將物品放置在相對定位的容器底部。

達到你想要什麼，你需要這樣的JS：

var offset_width = 15; 
var i = 0; 
$('.eqitem').each(function(){ 
    $(this).css('left', (i*offset_width) + 'px'); 
    i++; 
}); 

這個CSS：

#eq { 
     position:relative; 
    display: block; 
    height: 300px; 
    width: 100px; 
    } 
    .eqitem{ 
     position:absolute; 
     height: 0px; 
     width: 10px; 
     background: darkred; 
     margin-right: 5px; 
     -webkit-transition: height 0.5s ease-out; 
     transition: height 0.5s ease-out; 
     display:inline-block; 

     bottom:0; 
    } 

請看看小提琴這裏：https://jsfiddle.net/catbadger/pzy15m8e/1/

Answer 2

你可以通過以下方式以簡單和優雅的方式實現此目的： -

#eq{ 
    display : flex; 
    height: 300px; 
} 

.eqitem{ 
    display: inline-block; 
    align-self: flex-end; 
} 

結帳的Fiddle
結帳的Browser Compatibility