Html DIV内联块未水平对齐

我有五列，我使用

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>

图像在这里
图像在这里
您缺少每个
JSFiddle的尾端引号，这在这里会有所帮助。设置溢出：隐藏或发布JSFiddle请对相同的css选择器使用逗号：
.col1、.col2、.col3、.col4、.col5{…}
此外，
div clas=“col1”
应该是div
class=“col1”
（
class
拼写错误）我在键入时出错，因为我没有复制粘贴原始代码，因为每列中都有大量php代码。