2012-03-30 3 views
1

Можно создать дубликат:
How to make floating inner divs the same height as the highest divДинамического DIVs с одинаковой высотой

У меня есть переменное количество DIVs с переменным содержанием (содержание вытягиваются в через API). Все они float: left. Вы можете найти здесь пример: http://playgrounds.affiliate-howto.de/

Как вы видите, если описание в одном DIV короче, чем другое, дизайн нарушен.

Я бы предпочел исправить это с помощью CSS, но не смог найти решение. Если его нет, JS тоже хорошо ...

+0

Можете ли вы дать все предметы одинаковой высоты? '.sh_item {height: Npx; } ' – mrtsherman

+0

Создайте свой сайт для работы с содержимым, которое у вас есть. Это проблема плохого дизайна. –

+0

Проблема в том, что я не проектирую сайт или контент. Я создаю плагин, который вытаскивает контент из API на сайт wordpress пользователя. Поэтому я не знаю, сколько и какого контента будет. И я хочу получить решение, которое работает, не заставляя пользователя изменять код. – nucci

ответ

1

Вы можете использовать «мин-высота» атрибута CSS для того, чтобы сделать DIVs не меньше определенного размера (т.е. высота)

+0

Да, но если я это сделаю, и у меня есть DIV с дополнительной информацией. tha is выше минимальной высоты, я на том же месте, что и сейчас. И вместо использования min-height я могу дать всем DIVs одинаковое значение высоты. Но это не будет выглядеть хорошо, если в коробке будет меньше содержимого и слишком много пробелов. Так что это не вариант ... – nucci

+0

Тогда вам нужно ограничить описание продукта. Например, при макс. Может иметь две строки. В этом случае min-height может помочь (для заголовков, которые занимают только одну строку). Для этого вы можете ограничить максимальную высоту элемента заголовком. –

2

Вы можете просто установить все ящики до 312px, которые являются его текущим размером.

Вы можете сделать это с помощью CSS:

<style type="text/css"> 
.sh_item{ 
height:312px important; 
} 
</style> 

Или вы можете сделать это (JQuery) способ JavaScript:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.sh_item').css('height', '312px'); 
}); 
</script> 

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

Например, для каждого элемента, который вы используете sh_id. Идентификатор - это атрибут, который дает элементу уникальный идентификатор, поэтому предоставление всем элементам одного и того же идентификатора не будет корректно работать с CSS и не является точкой идентификаторов. Вы можете сделать sh_id1, sh_id2, sh_id3 и т. Д. Но это ваш выбор. Если вы хотите указать несколько элементов одного и того же стиля, используйте атрибут class.

Надеется, что это помогает :)

+0

Спасибо за ответ. Да, я знаю, что он не должен иметь уникальный идентификатор не один раз. Но DIVs создаются с помощью php-скрипта. Что он делает, он «читает» магазин на spreadshirt.net через api и создает DIV для каждого продукта, который он «получает». Так как существует множество разных магазинов и продуктов, это не возможность установить высоту в качестве параметра. Он должен быть динамичным и должен быть высотой самого высокого «контейнера» ... – nucci

+0

Затем используйте метод javascript. Он по-прежнему будет изменять их размер правильно. – Shawn31313

0

Дополнение к ответу Shawn31313, вы придаете определенную высоту вашему классу «sh_name», например «25px», и добавить переполнение: скрытые только для предотвращения дублирования текста.

Вы также можете обрезать свой текст с помощью PHP и добавить «...», если вы получите более длинный текст, чем вы ожидаете.

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