Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2014, 14:07
Новичок на форуме
Отправить личное сообщение для airy Посмотреть профиль Найти все сообщения от airy
 
Регистрация: 19.04.2014
Сообщений: 6

Выравнивание <div>
Здравствуйте. Только начал. Изучать html, css и т.д.

Возможно задача уже решена и является тривиальной.

Есть много однотипных блоков
<div class="bg">
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
</div>
(см. картинки)
с содержимым разного количества.

Как сделать чтобы блоки выстроились в таблицу, при этом высота строк таблицы?
была бы равна высоте максимального элемента в строке

как есть

http://javascript.ru/forum/attachmen...d=139790530 3

как хотелось бы

http://javascript.ru/forum/attachmen...d=139790530 7

Прошу хотя бы натолкнуть на мысль, какие функции по изучать
Или может какая-нибудь готовая функция jquery и т.д.
Заранее благодарен

p.s. если не тот раздел, прошу перекинуть
Изображения:
Тип файла: jpg как сейчас.jpg (10.6 Кб, 9 просмотров)
Тип файла: jpg как хотелось бы.jpg (10.7 Кб, 8 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2014, 15:23
Новичок на форуме
Отправить личное сообщение для airy Посмотреть профиль Найти все сообщения от airy
 
Регистрация: 19.04.2014
Сообщений: 6

Что помню из института:

1) Пробежать с 0 по 2 элемент, найти Hmax
2) Присвоить H0=Hmax, H1=Hmax, H2=Hmax,
3) Берем следующие 3 элемента и повторяем цикл

:-) а вот с синтаксисом буду большие проблемы

p.s. возможно есть и более элегантное решение
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2014, 17:05
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Так? http://learn.javascript.ru/play/hPVOrc
Ну, или приведите конкретную верстку, а там посмотрим.

Последний раз редактировалось jsnb, 19.04.2014 в 17:19.
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2014, 20:07
Новичок на форуме
Отправить личное сообщение для airy Посмотреть профиль Найти все сообщения от airy
 
Регистрация: 19.04.2014
Сообщений: 6

Да, спасибо. Это то что нужно. Все работает.
Вынес скрипт в отдельный файл:

function lineIt(massiv) {
var divs = $(massiv);
while (divs.length > 0) {
var row = $(divs.splice(0, 3));
var rowHeightArr = row.map(function(){ return $(this).outerHeight(); }).get();
var maxHeight = Math.max.apply(0, rowHeightArr);
row.height(maxHeight);
}
}
$(document).ready(function() {
lineIt($(".box-product > div"));
});

Это будет наглостью но спрошу,
как подправить функцию чтобы, передавать в нее не сами блоки,
над которыми совершаются действия, а их родительский блок?
У меня это ".box-content"
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2014, 20:37
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,633

http://chikuyonok.ru/2011/04/inline-vertical-align/
И никакого js.
__________________
29375, 35

Последний раз редактировалось Aetae, 19.04.2014 в 20:40.
Ответить с цитированием
  #6 (permalink)  
Старый 19.04.2014, 23:08
Новичок на форуме
Отправить личное сообщение для airy Посмотреть профиль Найти все сообщения от airy
 
Регистрация: 19.04.2014
Сообщений: 6

И это тоже работает, спасибо.
В первую очередь искал именно такой способ, без js.
(Правда придётся под него сейчас несколько шаблонов править.)

Спасибо еще раз.
Ответить с цитированием
  #7 (permalink)  
Старый 20.04.2014, 02:43
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от airy Посмотреть сообщение
как подправить функцию чтобы, передавать в нее не сами блоки, над которыми совершаются действия, а их родительский блок?
У меня это ".box-content"
Так? http://learn.javascript.ru/play/oly3Tb
Или имеется ввиду что таких .box-content несколько на странице и для каждого надо сделать выравнивание?
Ответить с цитированием
  #8 (permalink)  
Старый 20.04.2014, 08:48
Новичок на форуме
Отправить личное сообщение для airy Посмотреть профиль Найти все сообщения от airy
 
Регистрация: 19.04.2014
Сообщений: 6

Да, .box-content несколько на странице. В каждом может быть разное (не кратное 3) выравниваемых блоков.

И у .box-content нет дополнительных уникальных идентификаторов.

Второй вариант вашей функции отлично справляется, но как вы уже поняли, она выравнивает каждые три встречающихся на странице блока, в независимости в одном ли .box-content эти блоки расположены.

Спасибо, что помогаете
Ответить с цитированием
  #9 (permalink)  
Старый 20.04.2014, 09:22
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от airy Посмотреть сообщение
Второй вариант вашей функции отлично справляется, но как вы уже поняли, она выравнивает каждые три встречающихся на странице блока, в независимости в одном ли .box-content эти блоки расположены.)
Ну так прогнать функцию для каждого .box-content по отдельности:
Что-то типо этого:
$('.box-content').each( function() { lineIt( $(this) ) } )
Ответить с цитированием
  #10 (permalink)  
Старый 20.04.2014, 14:10
Новичок на форуме
Отправить личное сообщение для airy Посмотреть профиль Найти все сообщения от airy
 
Регистрация: 19.04.2014
Сообщений: 6

Да, все заработало, спасибо.
Вы очень помогли
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выравнивание li Жекаизжека jQuery 1 17.04.2014 14:59
Содержимое тега <div> domius Ваши сайты и скрипты 2 02.02.2014 13:40
Динамические <div>, fadeOut() Jquery igory Элементы интерфейса 1 08.07.2013 18:22
Вёрсточный кретинизм: Как растянуть <div> на весь родительский <td> ? xintrea (X)HTML/CSS 4 20.04.2013 19:51
вертикальное выравнивание micscr (X)HTML/CSS 1 16.01.2010 12:50