2015-11-26 6 views
0

У меня проблема с созданием ящиков одинаковой высоты для бутстрапа 3. В начале у меня были проблемы с разными размерами изображений, поэтому я попытался взломать его через JS и изменить их размер на лету. Проблема в том, что если для изображения нет кеша, JS терпит неудачу и еще больше закручивает макет. Я закончил изменение размеров всех изображений до 700 x 700 пикселей, но проблема все еще существует, поскольку сопроводительный текст может иметь разную длину.Ящики с одинаковой высотой

Я создал пример в скрипкой: https://jsfiddle.net/7yqkgm2c/

Я не очень хорошо с помощью CSS и мне интересно, если вы сможете мне помочь с решением.

Это JS, который я использовал, чтобы сделать все ящики и ту же высоту (удалить его из скрипки)

$(document).ready(function() { 
       //function that calculates height and makes all boxes same height. Issue- imeges that are not cached, screwing up the layout 
       var heights = $(".thumbnail").map(function() { 
        return $(this).height(); 
       }).get(), 
         maxHeight = Math.max.apply(null, heights); 
       $(".thumbnail").height(maxHeight + 15); 
       //end same height products     
      }); 

Это результат, который я хочу достичь (или предложить свое решение, если вы считаете, что вы знать, как подойти к нему лучше): example

+0

будет min-height: 123px работать для вас? в css? – VictorySaber

+0

У вас есть контроль над разметкой?Я заметил много лишних классов div и bootstrap в HTML, которые можно было удалить, чтобы упростить задачу CSS. – Candlejack

+0

Да, знаю. Это результат того, что я воюю с ним .. испортил это довольно хорошо – Andrew

ответ

1

Вот моя скрипка: https://jsfiddle.net/vhkmyaf3/18/

Предполагая, что вы находитесь в контроле разметки, я вымыл как каждый продукт может выглядеть так:

<div class='product-container col-xs-12 col-sm-6 col-md-3'> 
     <div class='item'> 
      <img src='http://placehold.it/700x700' /> 
      <div class='item-text'> 
       <h5>Product Title</h5> 
       <p>Product description. Lorem ipsum dolor sit amet.</p> 
      </div><!-- end of item-text --> 
      <div class='price-point'> 
       <div class='price'>$100</div> 
       <a class='btn btn-info' href='#'>View</a> 
      </div><!-- end of price-point --> 
     </div><!-- end of item --> 
    </div><!-- end of product-container --> 

product-container DIV используется один раз для каждого продукта, и все продукт-контейнер дивы появляться внутри DIV называется items-row. Вы бы повторили элемент-строку div, если хотите новую строку продуктов, но поскольку вы используете загрузку, это не является строго необходимым, поскольку продукты должны складываться.

Я только включил базовый CSS, который вам понадобится для структуры, плюс немного дополнений/границ и т. Д. Для уточнения. Ключ CSS для достижения выровненных высот вы хотите является использованием display:flex:

.items-row, .product-container { 
    display: webkit-box; 
    display: moz-box; 
    display: ms-flexbox; 
    display: webkit-flex; 
    display: flex; 
} 

Как показано в примере, вам нужно будет отменить display:flex и заменить display:block для любого устройства, на котором вы хотите продукты стеки в одном столбце. Приведенная выше скрипта должна продемонстрировать, что ваш размер изображения и описание продукта могут быть довольно гибкими, сохраняя при этом равные высоты.

0

Вы можете указать описание или название продукта с наименьшей высотой. Независимо от того, сколько текста они содержат, высота всегда будет соответствовать.

Я создал класс под названием «product-description» и дал ему минимальную высоту 95 пикселей. Это влияет только на текст под заголовком, но вы можете сделать то же самое для имени продукта, если вам нужно.

Затем вы можете использовать медиа-запросы для разных размеров и соответствующим образом корректировать эти значения.

HTML:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<div id="categories-list" class="row list-group"> 


          <div class="productlist"> 
          <div class="item col-md-2"> 
           <div class="thumbnail"> 
            <img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" /> 
            <div class="caption"> 
             <span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME VERY LONG LONG LONG LONG LONG LONG</h5></span> 
             <div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div> 
             <p class="group inner list-group-item-text ">Model: 12345</p> 
             <p class="group inner product-description">Text goes here</p> 
             <div class="row bottom_align"> 
              <div class="col-xs-12 col-md-6"> 
               <p class="lead">$19.95</p> 
              </div> 
              <div class="col-xs-12 col-md-6"> 
               <a class="btn btn-info" href="#">View</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div>  
          </div>  


           <div class="productlist"> 
          <div class="item col-md-2"> 
           <div class="thumbnail"> 
            <img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" /> 
            <div class="caption"> 
             <span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span> 
             <div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div> 
             <p class="group inner list-group-item-text ">Model: 12345</p> 
             <p class="group inner product-description">Text goes here</p> 
             <div class="row bottom_align"> 
              <div class="col-xs-12 col-md-6"> 
               <p class="lead">$19.95</p> 
              </div> 
              <div class="col-xs-12 col-md-6"> 
               <a class="btn btn-info" href="#">View</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div>  
          </div>  

           <div class="productlist"> 
          <div class="item col-md-2"> 
           <div class="thumbnail"> 
            <img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" /> 
            <div class="caption"> 
             <span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span> 
             <div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div> 
             <p class="group inner list-group-item-text ">Model: 12345grhj 4567u456uy4567g</p> 
             <p class="group inner product-description">Text goes here</p> 
             <div class="row bottom_align"> 
              <div class="col-xs-12 col-md-6"> 
               <p class="lead">$19.95</p> 
              </div> 
              <div class="col-xs-12 col-md-6"> 
               <a class="btn btn-info" href="#">View</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div>  
          </div>  

           <div class="productlist"> 
          <div class="item col-md-2"> 
           <div class="thumbnail"> 
            <img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" /> 
            <div class="caption"> 
             <span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span> 
             <div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div> 
             <p class="group inner list-group-item-text ">Model: 12345</p> 
             <p class="group inner product-description">Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here </p> 
             <div class="row bottom_align"> 
              <div class="col-xs-12 col-md-6"> 
               <p class="lead">$19.95</p> 
              </div> 
              <div class="col-xs-12 col-md-6"> 
               <a class="btn btn-info" href="#">View</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div>  
          </div>  

           <div class="productlist"> 
          <div class="item col-md-2"> 
           <div class="thumbnail"> 
            <img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" /> 
            <div class="caption"> 
             <span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span> 
             <div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div> 
             <p class="group inner list-group-item-text ">Model: 12345</p> 
             <p class="group inner product-description">Text goes here</p> 
             <div class="row bottom_align"> 
              <div class="col-xs-12 col-md-6"> 
               <p class="lead">$19.95</p> 
              </div> 
              <div class="col-xs-12 col-md-6"> 
               <a class="btn btn-info" href="#">View</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div>  
          </div>  

           <div class="productlist"> 
          <div class="item col-md-2"> 
           <div class="thumbnail"> 
            <img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" /> 
            <div class="caption"> 
             <span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span> 
             <div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div> 
             <p class="group inner list-group-item-text ">Model: 12345</p> 
             <p class="group inner product-description">Text goes here</p> 
             <div class="row bottom_align"> 
              <div class="col-xs-12 col-md-6"> 
               <p class="lead">$1</p> 
              </div> 
              <div class="col-xs-12 col-md-6"> 
               <a class="btn btn-info" href="#">View</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div>  
          </div>  

        </div> 

CSS:

body { 
     padding-top: 70px; 
     font-size: 12px; 
     /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */   
    } 

    html * { 
     outline: 0 !important; 
    } 


    .ui-pnotify { 
     padding-top: 70px;   
    } 

    /* make sidebar nav vertical */ 
    @media (min-width: 768px) { 
     .sidebar-nav .navbar .navbar-collapse { 
      padding: 0; 
      max-height: none; 
     } 
     .sidebar-nav .navbar ul { 
      float: none; 
     } 
     .sidebar-nav .navbar ul:not { 
      display: block; 
     } 
     .sidebar-nav .navbar li { 
      float: none; 
      display: block; 
     } 
     .sidebar-nav .navbar li a { 
      padding-top: 12px; 
      padding-bottom: 12px; 
     } 
    } 

    .top5 { margin-top:5px; } 
    .top7 { margin-top:7px; } 
    .top10 { margin-top:10px; } 
    .top15 { margin-top:15px; } 
    .top17 { margin-top:17px; } 
    .top30 { margin-top:30px; } 

.glyphicon { margin-right:5px; } 
      .thumbnail 
      { 
       margin-bottom: 20px; 
       padding: 0px; 
       -webkit-border-radius: 0px; 
       -moz-border-radius: 0px; 
       border-radius: 0px; 
      } 

      .item.list-group-item 
      { 
       float: none; 
       width: 100%; 
       background-color: #fff; 
       margin-bottom: 10px; 
      } 
      .item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover 
      { 
       background: #428bca; 
      } 

      .item.list-group-item .list-group-image 
      { 
       margin-right: 10px; 
      } 
      .item.list-group-item .thumbnail 
      { 
       margin-bottom: 0px; 
      } 
      .item.list-group-item .caption 
      { 
       padding: 9px 9px 0px 9px; 
      } 
      .item.list-group-item:nth-of-type(odd) 
      { 
       background: #eeeeee; 
      } 

      .item.list-group-item:before, .item.list-group-item:after 
      { 
       display: table; 
       content: " "; 
      } 

      .item.list-group-item img 
      { 
       float: left; 
      } 
      .item.list-group-item:after 
      { 
       clear: both; 
      } 
      .list-group-item-text 
      { 
       margin: 0 0 10px; 
      } 

      /*   PANEL COLLAPSE */ 
      .panel-heading a:after { 
       font-family:'Glyphicons Halflings'; 
       content:"\e114"; 
       float: right; 
       color: grey; 
      } 
      .panel-heading a.collapsed:after { 
       content:"\e080"; 
      } 
      /*   PANEL COLLAPSE */ 


      .filters { 
       max-height:165px; 
       overflow-y:auto; 
      } 

      .bottom_align{ 
       position: absolute; 
       margin-top: 3px; 
       margin-bottom: 10;  
       bottom: 10px; 
      } 

      .thumb1 { 
       width: 250px; 
       height: 250px; 
      } 

.product-description { 
    min-height: 95px; 
} 

JSFiddle