Question

我在我的网站上创建了一个网格，它看起来像这样。我不知道为什么但是当角色变得太长时，div的位置会破坏。谁能帮我解决这个问题并解释原因？

图像：

enter image description here

我的css

   .product-wrapper{
    margin: 0 auto; 
    display: table;
    text-align: center; 
}
.product-holder{   
    display: inline-block; 
    width:220px;
    height: 150px;
    border:1px solid #666666;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px #666666;
    -webkit-box-shadow: 0 0 0 5px #666666;
    box-shadow: 0 0 5px #666666;  
}

.product-image{
    display: block;
    width: auto;
    height: 90px; 
    margin:10px; 
    border:1px solid #666666;
}
.product-caption{
    width: auto; 
    display: block;
    font-weight: bold;
    margin:0 10px; 
    word-wrap:break-word; 
}

我的HTML

  <div class="product-wrapper">
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Simple Product Name</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">AveryVeryverylongPRoductNamewithoutspace</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">AveryVeryverylongPRoductNamewithoutspace</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Products</span>
                        </div>
                       <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">A productNamefor Sample</span>
                        </div>
                        <div class="product-holder"> 
                            <span class="product-image"></span>
                            <span class="product-caption">Another Product</span>
                        </div>
                    </div>

Answer 1

将此添加到.product-holder

.product-holder {vertical-align：middle; }

Answer 2

试试这个。产品的包装器{ 保证金：0自动; 显示：表; text-align：center; }

.product-holder{   
             display: inline-block; 
             width:220px;
            height: 150px;
            border:1px solid #666666;
            margin-right: 10px;
            margin-bottom: 10px;
           border-radius: 5px;
          -moz-box-shadow: 0 0 0 5px #666666;
          -webkit-box-shadow: 0 0 0 5px #666666;
           box-shadow: 0 0 5px #666666;  
         }

.product-image{
              display: block;
              width: auto;
              height: 90px; 
               margin:10px; 
             border:1px solid #666666;
              }

 .product-caption {

                 display: block;
              float:left;
                  font-weight: bold;
                   margin: 0 10px;
                   overflow: hidden;
                  width: 200px;
                  word-wrap: break-word;
                    }

div中的网格列

2 个答案: