html - DIV インライン ブロックが水平方向に整列していない

Question

を使用して整列した5つの列display:inline-blockがありますが、問題はありません。最初の列が一番上にあるときにページを約 4 ～ 5 回更新すると、他の 4 つの列が一番下に移動し、再度更新すると元の場所に戻ります。これの原因がわかりませんでした。列内のコンテンツはデータベースからのものです。誰かが私にヒントを与えることができますか？

CSS

    .col1
{
    display:inline-block;
    vertical-align:top;
    width:225px;
}

.col2
{
    display:inline-block;
    vertical-align:top;
    width:225px;
}

.col3
{
    display:inline-block;
    vertical-align:top;
    width:225px;
}

.col4
{
    display:inline-block;
    vertical-align:top;
    width:225px;
}

.col5
{
    display:inline-block;
    vertical-align:top;
    width:225px;
}

.col_content_wrap
{
    background-color:#fff;
    border:1px solid #ddd;
    border-radius:5px 5px 5px 5px;
    box-shadow:4px 4px 1px #eee;
    margin-bottom:10px;
}

.imgwrap
{
    height:169px;
    position:relative;
    width:223px;
}

.price_wrap
{
    border-top:1px solid silver;
    height:50px;
}

.price
{
    float:right;
    margin:10px;
}

HTML

  <div clas="col1">
  <div class="col_content_wrap>
  <div class="imgwrap">image here
   <div class="price_wrap"><div class="price">
    </div>
    </div>
    </div>
    </div>



<div clas="col2">
  <div class="col_content_wrap>
  <div class="imgwrap">image here
   <div class="price_wrap"><div class="price">
    </div>
    </div>
    </div>
    </div>


 <div clas="col3">
  <div class="col_content_wrap>
  <div class="imgwrap">image here
   <div class="price_wrap"><div class="price">
    </div>
    </div>
    </div>
    </div>


  <div clas="col4">
  <div class="col_content_wrap>
  <div class="imgwrap">image here
   <div class="price_wrap"><div class="price">
    </div>
    </div>
    </div>
    </div>



  <div clas="col5">
  <div class="col_content_wrap>
  <div class="imgwrap">image here
   <div class="price_wrap"><div class="price">
    </div>
    </div>
    </div>
    </div>