-2

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

1 回答 1

1

您缺少每个<div class="col_content_wrap>元素的尾引号。

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

于 2013-08-23T22:15:32.070 回答