Проблема CSS с мультиаккордеоном

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

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

Дело в том, что я должен сделать высоту 62 пикселя, чтобы все поместилось и не плавало повсюду. Это создает проблему с областью «Просмотр комментариев» и «Текст здесь», так как вы можете сказать, что между ними слишком много места.

Другая проблема заключается в том, что в настоящее время я принудительно делаю отступ в тексте статьи, чтобы он не перетекал в TEXT WRAP под миниатюрным изображением. По сути, я хочу, чтобы он был разделен на 2 столбца, чтобы ничего не было под изображением, но работа с этим аккордеоном и элементами div внутри элементов div оказалась для меня сложной.


person Josh    schedule 03.04.2010    source источник


Ответы (1)


Вы можете определить это в своем CSS, чтобы установить высоту:

.acc2 { height: auto !important; }

Поскольку ваши дочерние аккордеоны имеют класс acc2 в заголовке, это переопределит, восстановив высоту по умолчанию, чтобы соответствовать тексту.

person Nick Craver    schedule 03.04.2010
comment
Спасибо за это, как насчет этой проблемы с переносом текста? - person Josh; 03.04.2010
comment
@Josh - С вашим текущим макетом padding-left, как у вас, является самым простым подходом, есть ли какая-то проблема, которую я не вижу? - person Nick Craver; 03.04.2010
comment
Может просто я придираюсь. Я действительно хотел, чтобы вся область новостей была ограничена 542 пикселями, но, думаю, мне просто нужно увеличить ее до 557 пикселей, чтобы свести к нулю вероятность переноса текста. - person Josh; 03.04.2010
comment
@Josh - вы можете увеличить левый отступ на этом внутреннем div или изменить его на поле и уменьшить его фактическое значение width:, общая ширина должна оставаться неизменной. - person Nick Craver; 03.04.2010