1

Вопрос в том, чтобы высота всех колонок была одинаковая, и подстраивалась под контент в них. Ширина колонок 25%, для адаптивности. Пробовал высоту через min-height, но при сужении страницы, если контента больше чем min-height, столбец начинает тянутся вниз по высоте, и выглядит некрасиво. Есть ли ещё способ без использования flex-box? Спасибо! Примечание: у столбцов по периметру должны быть внешние границы, и между границами отступ, это обязательное условие. HTML:

 .features {
        margin-top: 20px;
        margin-bottom: 75px;
  }
  .feature-item {
        float: left;
        width: 25%;
        color: #000000;
        padding: 0 6px;
        box-sizing: border-box;
    }

     .feature-item-inner {
        border: 1px solid #e0e0e0;  
    }
<div class="features">
       <div class="feature-item ">
              <div class="feature-item-inner">                                            <p class="feature-description">
                        text text text text text text text text 
                     </p>
              </div>
       </div>
       <div class="feature-item ">
              <div class="feature-item-inner">                                            <p class="feature-description">
                        text text text text text text text text
                        text text text text text text text text 
                     </p>
              </div>
       </div>
      <div class="feature-item ">
              <div class="feature-item-inner">                                            <p class="feature-description">
                        text text text text text text text text
                        text text text text text text text text 
                        text text text text text text text text 
                     </p>
              </div>
       </div>
      <div class="feature-item">
              <div class="feature-item-inner">                                            <p class="feature-description">
                        text text text text text text text text
                        text text text text text text text text 
                        text text text text text text text text 
                     </p>
               </div>
       </div>
</div>

https://jsfiddle.net/yu02c5tk/

0

1 ответ 1

3

Можно через свойство display: table-cell;

.col {
  width: 25%;
  padding: 5px;
  display: table-cell;
   box-sizing: border-box;
  border: 1px solid #e0e0e0;
  }
<div class="col">text text text text text text text text</div>
<div class="col">text text text text text text text texttext text text text text text text text</div>
<div class="col">text text text text text text text texttext text text text text text text texttext text text text text text text text</div>
<div class="col">text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</div>

6
  • Хорошее решение. Жаль только - неадаптивная верстка. 22 авг 2016 в 13:06
  • вот как раз то табличная вёрстка всегда была адаптивная
    – user33274
    22 авг 2016 в 13:30
  • а чтобы между границами столбцов были отступы можно при этом способе осуществить?
    – allweek
    22 авг 2016 в 13:41
  • конечно , сделать border-right:10px solid transparent; вот пример :codepen.io/Geyan/pen/kXdLyw
    – user33274
    22 авг 2016 в 13:46
  • к сожалению не подходит. У меня в макете внешние границы у этих столбцов по периметру, и между границами отступ, это обязательное условие. border-right не подойдет
    – allweek
    22 авг 2016 в 13:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.