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