Titre du produit alignement

Le site e-commerce construit en PHP. Dans la page de liste des produits, le produit et les noms ne sont pas alignés. Comment puis-je réparer cela? Ajouté un script J'espère que cela aidera. J'ai ajouté la hauteur de l'image mais la qualité de l'image n'est pas bonne.Titre du produit alignement

HTML:

<script> 
 

 
/* -- product list images -- */ 
 
.product-image img.attachment-shop_catalog, 
 
.product-image img.attachment-shop_single, 
 
.product-image img.attachment-shop_thumbnail { 
 
    display: block; 
 
    min-width: 100%; } 
 

 
.product-image { 
 
    position: relative; 
 
    display: block; 
 
    overflow: hidden; } 
 

 
.product-image .front-image { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; } 
 

 
.product-image .front-image img { 
 
    min-width: 99.9%; 
 
    max-width: 101% !important; 
 
    width: auto !important; 
 
    height: auto !important; 
 
    display: block; } 
 

 
.product-image .back-image img { 
 
    min-width: 100%; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: auto !important; 
 
    height: auto !important; 
 
    display: block; 
 
    backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; } 
 

 
.product-image:hover .back-image img { 
 
    opacity: 1; } 
 

 
</script>

<li class="product-small grid1 grid-normal"> 
 
\t \t \t \t \t \t \t <div class="inner-wrap"> 
 
\t \t \t \t \t \t \t \t <a href="eyewear_details.php?Id=<?php echo $Frame_id?>"> 
 
\t \t \t \t \t \t \t \t \t <div class="product-image hover_fade_in_back"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="front-image"> 
 
              <?php if($Color1Image!="" && file_exists(FRAME_IMAGES_FRONT.$Color1Image)):?> 
 
              <img width="247" height="116" alt="ete thecle-cygne" class="attachment-shop_catalog wp-post-image" src="<?php 
 

 

 
              echo PHP_THUMB_PATH_FRONT.urlencode($Color1Image).IMAGE_PROPERTY5; 
 

 
               ?>"> 
 
              <?php else: 
 
          echo '<img width="247" height="116" alt="ete thecle-cygne" class="attachment-shop_catalog wp-post-image" src="no-image-icon-11.png" style=" 
 
    height: 90px !important;"/>'; 
 
              
 
          </div> 
 
\t \t \t \t \t \t \t \t \t </div><!-- end product-image --> 
 
\t \t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t \t \t <div class="info style-grid1"> 
 
\t \t \t \t \t \t \t \t \t <div class="text-center"> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <a href="eyewear_details.php?Id=<?php echo $Frame_id?>"><p class="name"><?php echo $FrameName?></p></a> 
 
\t \t \t \t \t \t \t \t \t </div><!-- text-center --> 
 
\t \t \t \t \t \t \t \t \t <div class="clear"></div> \t 
 
\t \t \t \t \t \t \t \t </div><!-- end info --> \t 
 
\t \t \t \t \t \t \t </div> <!-- .inner-wrap --> 
 
\t \t \t \t \t \t </li><!-- li.product-small -->

Source

2017-05-18 ncksteven

Pouvez-vous partager votre code –

Comment pouvons-nous dire avec un exemple du code HTML et CSS? –

S'il vous plaît partagez votre code –

Vous pouvez utiliser ci-dessous pour elle approche

img { 
 
\t \t \t max-width: 100%; 
 
\t \t } 
 
\t \t .main { 
 
\t \t \t width:300px; 
 
\t \t \t display: inline-flex; 
 
\t \t \t justify-content: center; 
 
\t \t \t align-items: center; 
 
\t \t \t flex-flow: column nowrap; 
 
\t \t \t padding: 10px; 
 
\t \t }

<div class="main"> 
 
\t \t <div class="image"> 
 
\t \t \t <img src="http://www.clker.com/cliparts/A/Y/O/m/o/N/placeholder-hi.png" alt=""> 
 
\t \t </div> 
 
\t \t <div class="imageName"> 
 
\t \t \t <a href="">Product name</a> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="main"> 
 
\t \t <div class="image"> 
 
\t \t \t <img src="http://vignette1.wikia.nocookie.net/prince-of-stride-alternative/images/1/14/Placeholder_person.jpg/revision/latest?cb=20160220192514" alt=""> 
 
\t \t </div> 
 
\t \t <div class="imageName"> 
 
\t \t \t <a href="">Product name</a> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="main"> 
 
\t \t <div class="image"> 
 
\t \t \t <img src="https://www.med.unc.edu/tarc/images/person%20placeholder.png" alt=""> 
 
\t \t </div> 
 
\t \t <div class="imageName"> 
 
\t \t \t <a href="">Product name</a> 
 
\t \t </div> 
 
\t </div>

Source

2017-05-18 06:47:49 LKG

Merci. Ça a marché. – ncksteven

Il est plus utile aux autres si vous donnez une petite explication de ce que vous avez fait. –

@MayankPandeyz Je pense que vous ne lisez pas les commentaires, s'il vous plaît lire les commentaires, puis avis, parce que quand css réponse est donné par quelqu'un est l'explication complète par son code d'exemple, donc je pense que cette approche est préférable aux autres membres de la communauté s'ils connaissent css. – LKG

Régler la même hauteur pour toutes les images de ce produit.

Source

2017-05-18 06:16:11 pzworks

Alors que cela peut être une bonne idée, il n'y a pas de moyen possible de savoir sans plus d'informations, et le code –

-1

tables d'utilisation et placez le nom de l'image dans les différents rangs

Source

2017-05-18 06:20:48 sareef

Le son est comme une mauvaise idée pour moi. Tout design réactif est maintenant parti avec des tables. L'accessibilité sera un cauchemar. Honnêtement, nous avons besoin de plus d'informations pour comprendre ce qui se passe. –

Vous pouvez utiliser flex property pour css dans ou utiliser position:absolute; bottom:0px; width:100%; left:0px; css pour le nom du produit.

Source

2017-05-18 06:32:06 LKG

Vous devez utiliser position: absolute; top: auto; left: 0; right: 0; bottom: 0; avec classe bootstrap img-thumbnail pour la réactivité. J'utilise des images de différentes tailles avec des étiquettes. J'espère que cela aidera.

Source

2017-05-18 08:58:21

Titre du produit alignement

Répondre

Questions connexes