col-sm-4 height bootstrap

Я использую bootstrap для отображения набора sm-4 div. Каждая из них включает панель, в которой заголовок содержит изображение. Эти изображения получили переменные размеры, однако я хотел бы, чтобы эти столбцы имели разную высоту. Является ли это возможным ?col-sm-4 height bootstrap

До сих пор это HTML

<div class="row"> 
          <a href="/app_dev.php/fly/50" class="fly_a"> 
     <div class="col-sm-4 flycard"> 
     <div class="panel panel-default unpan"> 
      <div class="panel-body planepi"> 
        <img src="/Planes/AAT3.jpg" class="img_responsive" width="100%"> 

      </div> 
      <div class="panel-footer"> 
      <h4>Falaise - Dieppe</h4> 

       <p>3 places</p> 
      </div> 
     </div> 
     </div> 
     </a> 
            <a href="/app_dev.php/fly/48" class="fly_a"> 
     <div class="col-sm-4 flycard"> 
     <div class="panel panel-default unpan"> 
      <div class="panel-body planepi"> 
        <img src="/Planes/BE36.jpg" class="img_responsive" width="100%"> 

      </div> 
      <div class="panel-footer"> 
      <h4>Bordeaux - Toulouse</h4> 

       <p>1 place</p> 
      </div> 
     </div> 
     </div> 
     </a> 
            <a href="/app_dev.php/fly/46" class="fly_a"> 
     <div class="col-sm-4 flycard"> 
     <div class="panel panel-default unpan"> 
      <div class="panel-body planepi"> 
        <img src="/Planes/DA20.jpg" class="img_responsive" width="100%"> 

      </div> 
      <div class="panel-footer"> 
      <h4>Flers - Pontoise</h4> 

       <p>1 place</p> 
      </div> 
     </div> 
     </div> 
     </a> 
    </div>

Вот CSS (Это то, что я пытался до сих пор)

.flycard 
{ 
text-align:      left; 
} 
// EDIT : ADD THIS TO SOLVE THE PROBLEM 
.planepi 
{ 
    max-height:      200px; 
    min-height:      200px; 
    overflow: hidden; 
    height:       100%; 
    width:       100%; 
} 

.planepi img 
{ 
    max-width:100%; 
    max-height:100%; 
}

И вот результат Plane pictures should be the same height, even if it has to overflow a bit

источник

2015-05-25 Pierre Olivier Tran

Так что вы хотите изображения, чтобы быть того же размера или коробки? – brance

Изображения. Как только это будет сделано, я предполагаю, что ящики тоже будут иметь одинаковый размер. –

Ну, вы можете попробовать сделать это с .planepi {max-height: 200px; переполнение: скрыто; } Это установит изображение div на максимальную высоту 200 пикселей и скроет все, что ниже. – brance

Для тех, кто с та же проблема, вам нужно указать максимальную высоту div, которая содержит изображение:

.planepi { 
    max-height: 200px; //this is the max height you want 
    overflow: hidden; //everything that goes bellow 200px will be hidden 
}

Конечно, вам легче подготовить изображения к одной высоте, но это будет работать.

источник

2015-05-25 14:08:27 brance

CSS Units

CSS имеет несколько различных единиц для выражения длины.

Многие свойства CSS принимают значения «длина», такие как ширина, маржа, отступы, размер шрифта, ширина границы и т. Д. Длина - это число, за которым следует единица длины, например 10px, 2em и т. Д.

Пробел между номером и устройством не может быть пробелом. Однако, если значение равно 0, для некоторых свойств CSS можно исключить единицу, допустимы отрицательные длины. Существует два типа единиц длины: относительный и абсолютный.

w3schools css units

.planepi { 
    min-height: 30vh; 
    height: 30vh; 
    max-height: 30vh; 
    overflow: hidden; 
}

В.Х. По отношению к 1% от высоты окна просмотра

источник

2015-05-26 18:56:05 ccdiego5

col-sm-4 height bootstrap

ответ

Смежные вопросы