0

自分のサイトにグリッドを作成しましたが、次のようになります。理由はわかりませんが、キャラクターが長くなりすぎると、divの位置が破壊されます。誰かが私がこれを修正して理由を説明するのを手伝ってもらえますか？

画像：

ここに画像の説明を入力してください

私の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>
4

2 に答える 2

1

これを .product-holder に追加します

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

于 2013-02-13T05:41:55.427 に答える
0

この.product-wrapper{margin：0auto;を試してください。表示：テーブル; 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;
                    }
于 2013-02-13T06:05:27.510 に答える