2011-09-08 16 views
6

One Div lower than othersएक इनलाइन डिव से बाकी

<div class='noshop-products-div'><div class='noshop-products' align='center'> 

<!-- -------------------- NoShop Item: The Dream Giver Library/The Dream Giver -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox width=83 style="width:83px;" > 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiver.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver</div></a> 
     <div class=noshop-product-desc> 
      &nbsp; 
     </div> 
     <div class=noshop-product-subtable> 
      &nbsp; 
     </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library/The Dream Giver DVD -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox width=83 style="width:83px;" > 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverdvd.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver DVD</div></a> 
     <div class=noshop-product-desc> 
      &nbsp; 
     </div> 
     <div class=noshop-product-subtable> 
      &nbsp; 
     </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library/The Dream Giver CD -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox width=83 style="width:83px;" > 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgivercd.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver CD</div></a> 
     <div class=noshop-product-desc> 
      &nbsp; 
     </div> 
     <div class=noshop-product-subtable> 
      &nbsp; 
     </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library/The Dream Giver Workbook -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox width=83 style="width:83px;" > 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverworkbook.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver Workbook</div></a> 
     <div class=noshop-product-desc> 
      &nbsp; 
     </div> 
     <div class=noshop-product-subtable> 
      &nbsp; 
     </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library/The Dream Giver for Teens -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox width=83 style="width:83px;" > 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverteens.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Teens</div></a> 
     <div class=noshop-product-desc> 
      &nbsp; 
     </div> 
     <div class=noshop-product-subtable> 
      &nbsp; 
     </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library/The Dream Giver for Parents -------------------- --> 
<div class='noshop-product last-product'> 
    <div class=noshop-product-imagebox width=83 style="width:83px;" > 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverparents.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
     <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Parents</div></a> 
     <div class=noshop-product-desc> 
      &nbsp; 
     </div> 
     <div class=noshop-product-subtable> 
      &nbsp; 
     </div> 
    </div> 
</div> 
</div><!--End Products DIV --> 

/* No Shop Categories */ 
.The_Dream_Giver_Library { 
    background: #cf2426; 
    background: -moz-linear-gradient(top, #cf2426 0%, #ac1e1f 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf2426), color-stop(100%,#ac1e1f)); 
    background: -webkit-linear-gradient(top, #cf2426 0%,#ac1e1f 100%); 
    background: -o-linear-gradient(top, #cf2426 0%,#ac1e1f 100%); 
    background: -ms-linear-gradient(top, #cf2426 0%,#ac1e1f 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf2426', endColorstr='#ac1e1f',GradientType=0); 
    background: linear-gradient(top, #cf2426 0%,#ac1e1f 100%); 
} 

/* No Shop Products */ 
.noshop-category { 
    color: #fff; 
    width: 100%; 
    margin: 0 auto; 
    margin-bottom: 5px; 
    text-align: center; 
    padding-top: 3px; 
    font-weight: bold; 
    font-size: 18px; 
    height: 30px; 
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3); 
    -moz-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3); 
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3); 
    border: 1px solid rgba(0,0,0,0.4); 
} 
.noshop-products-div { 
    margin: 0 auto; 
    text-align: center; 
} 
.noshop-products { 
    margin: 0 auto; 
    height: 190px; 
    background: #fefefe; 
    background: -moz-linear-gradient(top, #fefefe 0%, #d3d3d3 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#d3d3d3)); 
    background: -webkit-linear-gradient(top, #fefefe 0%,#d3d3d3 100%); 
    background: -o-linear-gradient(top, #fefefe 0%,#d3d3d3 100%); 
    background: -ms-linear-gradient(top, #fefefe 0%,#d3d3d3 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#d3d3d3',GradientType=0); 
    background: linear-gradient(top, #fefefe 0%,#d3d3d3 100%); 
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3); 
    -moz-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3); 
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3); 
    border: 1px solid rgba(0,0,0,0.4); 
    margin-top: 10px; 
    display:-moz-inline-stack; 
    display:inline-block; 
    text-align: cente; 
} 
.noshop-product { 
    display:-moz-inline-stack; 
    display:inline-block; 
    width: 115px; 
    height: 170px; 
    margin: 10px 0px; 
    border-right: 1px solid #939598; 
} 
.last-product { 
    border-right: none; 
} 
.noshop-product-imagebox { 
    margin: 0 auto; 
    width: 83px; 
} 
.noshop-product-imagebox img { 
    height: 115px; 
} 
.noshop-product-textbox { 
    text-align: center; 
    padding: 0px 15px; 
} 
.noshop-product-textbox a, .noshop-product-textbox a:visited, .noshop-product-textbox a:link { 
    color: #000; 
    font-size: 10px; 
    font-weight: bold; 
} 

उत्तर

11

आप आसानी से इस जरूरत कम स्थानांतरित कर दिया:

.noshop-product { 
    vertical-align: top 
} 

वहाँ आपकी समस्या के लिए दो कारण हैं: डिफ़ॉल्ट vertical-alignbaseline है, और के अंदर का पाठ अन्य.noshop-product एस में सभी टेक्स्ट की दो पंक्तियां हैं।

संबंधित मुद्दे