产品标题对齐

Question

e-commerce 网站内置于 PHP。在产品列表页面中，产品和名称没有直线排列。我怎样才能解决这个问题？添加了一些脚本我希望这会有所帮助。我加了图片高度但是图片质量不好

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">
       <div class="inner-wrap">
        <a href="eyewear_details.php?Id=<?php echo $Frame_id?>">
         <div class="product-image hover_fade_in_back">
          <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>
         </div><!-- end product-image -->
        </a> 
        <div class="info style-grid1">
         <div class="text-center">
        
         <a href="eyewear_details.php?Id=<?php echo $Frame_id?>"><p class="name"><?php echo $FrameName?></p></a>
         </div><!-- text-center -->
         <div class="clear"></div> 
        </div><!-- end info --> 
       </div> <!-- .inner-wrap -->
      </li><!-- li.product-small -->

Answer 1

为所有产品图片设置相同的高度。

Answer 2

使用表格并将图像名称放在不同的行

Answer 3

您可以在css中使用css flex property或使用position:absolute; bottom:0px; width:100%; left:0px;作为产品名称。

Answer 4

您可以使用以下方法

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

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

Answer 5

您必须使用 position: absolute; top: auto; left: 0; right: 0; bottom: 0; 和 bootstrap class img-thumbnail 来提高响应速度。我正在使用带有标签的不同尺寸的图像。我希望这将有所帮助。 Demo Link

产品标题对齐

Product title alignment

html

css

product

image

line