Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2015, 21:48
Интересующийся
Отправить личное сообщение для Енот Посмотреть профиль Найти все сообщения от Енот
 
Регистрация: 14.01.2015
Сообщений: 22

Блоки одинаковой высоты
Всем привет, нужна ваша помощь.
Есть три дива, на странице, нужно, что бы они были все одинаковой высоты, они резиновые, и в любом диве может быть много текста, а высота должна быть одинаковая. Дивы могут размещаться в любой части странице. Буду очень благодарен вашей помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2015, 23:56
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Енот,
1. Разместить все див в ячейках таблицы заданной ширины с margin:0; затем спозиционировать с posizion:absolute в нужное место
2. Придать один класс. перебрать и отследить наибольшую высоту и задать всем идентичную
3. Задать жестко высоту с автоскроллом

Последний раз редактировалось Deff, 03.06.2015 в 23:58.
Ответить с цитированием
  #3 (permalink)  
Старый 04.06.2015, 00:11
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrapper {
      width: 80%;
      display: flex;
      margin: auto;
    }

    .column {
      border: 2px solid #ccc;
      margin-right: 0.5em;
    }

    .column:last-child {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias, atque aut corporis esse id ipsa labore libero obcaecati officiis possimus quam recusandae repellendus similique ullam unde voluptate voluptates? Mollitia.</p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cum dicta, dolorum ea eveniet explicabo fugiat in laborum magni odio officiis optio perspiciatis, possimus quaerat reprehenderit vel veritatis. Deserunt, nulla!</p>

      <p>Adipisci consectetur consequuntur doloremque doloribus ipsa odio placeat quidem voluptate. Debitis ex in nihil possimus quisquam vitae voluptates? Aliquam aliquid cumque dolor facilis iure nihil nobis non placeat quasi repellendus.</p>

      <p>Adipisci, aliquam architecto asperiores aspernatur at consequuntur cum fuga ipsa iste iure natus nisi numquam odio perspiciatis placeat provident qui quo rem repellendus repudiandae, rerum saepe, sint sit suscipit tempora.</p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolor ex labore, molestias mollitia nobis quasi! Aperiam blanditiis eos error laboriosam libero, maxime molestias nostrum, quas quidem temporibus tenetur, veritatis.</p>
    </div>
  </div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт выравнивания высоты блоков razorg1991 Элементы интерфейса 13 15.01.2017 00:04
Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе Sigizmund2012 Элементы интерфейса 18 09.12.2014 18:07
Измерить высоту блока исходя из высоты браузера skillful Элементы интерфейса 1 19.01.2014 21:20
Показать скрыть блоки nurik2120 Элементы интерфейса 4 18.06.2013 10:59
Jquery UI Tabs плодятся блоки при переключении между вкладками. Arey jQuery 12 05.09.2012 21:57