Равные высоты divs

Я получаю удовольствие от сайта, использующего bootstrap 3, который имеет три div на главной странице, которые для некоторых браузеров и размеров окна браузера (*) не совсем выровнены внизу (много до раздражения пользователей). Я пробовал различные решения, но ничего не нашел, что решает проблему, не вызывая поломки в другом месте.Равные высоты divs

Поэтому я задаюсь вопросом, есть ли у кого-нибудь предложения. Вот код:

<div class="container-fluid light-grey-bg"> 
    <div class="row-fluid text-center"> 
     <div class="col-md-12"> 
      <p class="lead main-tagline">A blurb describing the awesome content of this site.</p> 
     </div> 

     <div class="clearfix"></div> 

     <div class="row-eq-height"> 
      <div class="col-md-4"> 
       <div class="top-usp"> 
        <a href="/first" class="btn btn-lg btn-info">First link</a> 
        <br/><br/> 
        <img src="/img/home/svg/first.svg"width="260px"> 
        <p>The first thing described. This description is quite long and tends to wrap at a different place, thereby changing the size of this box in relation to the others. 
        </p> 
       </div> 
      </div> 

      <div class="col-md-4" style="height: 100%;"> 
       <div class="top-usp"> 
        <a href="/second" class="btn btn-lg btn-info">Second</a> 
        <br/><br/> 
        <img src="/img/home/svg/second.svg"> width="260px"> 
        <p>A much shorter description for the second item. 
        </p> 
       </div> 
      </div> 

      <div class="col-md-4" style="height: 100%;"> 
       <div class="top-usp"> 
        <a href="/third" class="btn btn-lg btn-info">Third</a> 
        <br/><br/> 
        <img src="/img/home/svg/third.svg"> width="260px"> 
        <p>The third item is much like the second. 
        </p> 
       </div> 
      </div> 



      </div> 
     </div> 
    </div>

Вот некоторые СКС для страницы:

.home { 
    height: 100%; 

    .row-eq-height { 
    height: 100%; 
    } 

    .top-usp { 
    background-color: white; 
    margin: 15px; 
    padding: 20px; 
    border-radius: 5px; 
    min-height: 235px; 
    height: 90%; 

    -webkit-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1); 
    -moz-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1); 
    box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1); 

    } 
}

Любые мысли о конкретной проблеме размера будет признателен, если кто-нибудь имеет момент.

(*) E.g. iPads, MacBook Airs с использованием Safari. Это отлично выглядит на настольном Chrome.

источник

2016-09-09 knirirr

Duplicate - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height –

Спасибо за ссылку на статью, которую мне не удалось найти. Мой HTML немного отличается от структуры, поскольку у меня есть дополнительный уровень div, но я увижу, есть ли какие-либо из предлагаемых решений. – knirirr

Кажется, что самыми близкими являются различные подходы с использованием flex, которые я уже пробовал раньше. Однако, как только экран становится достаточно маленьким, а divs расположены выше друг друга, правые края не выравниваются. Таблицы и решения с отрицательной маркой не оказывают никакого влияния. – knirirr

Я пробовал различные варианты; flex кажется лучшим, пока ящики не переместятся в один столбец на маленьких экранах, в которые точки не выравниваются. В итоге этот более или менее сделал трюк:

/* from the "duplicate" ticket */ 
.row-eq-height { 
    overflow: hidden; 
} 

.row-eq-height > [class*="col-"]{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 


/* this seems to be the fix */ 
.top-usp { 
    .... 
    min-height: 250px; 
    .... 
}

Изменение высоты было необходимо, так как отрицательные поля были недостаточными.

источник

2016-09-09 13:26:01 knirirr

Равные высоты divs

ответ

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