Question

我有五列，我使用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>

Answer 1

您缺少每个<div class="col_content_wrap>元素的结束引用。

此外，在每个html块中，您有5 <div>个而且只有4 </div>个

DIV内联块不水平对齐

1 个答案: