X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Соответствие высоты элеметнов <li> одного списка, высоте элементов <li> другого
logme
logme
Topic Starter сообщение 15.4.2012, 13:17; Ответить: logme
Сообщение #1


Доброго времени суток!
Назрел такой вопрос: есть нумерованный список состоящий, допустим, из пяти элементов. В качестве значений этих элементов выступает текст различной длины. Сам список (<ol>) ограничен шириной в 500 пикселей, это приводит к тому, что некторые значения элементов <li> занимают несколько строк.
И есть второй список, состоящий из стольки же элементов, но при этом нужно чтобы элементы второго списка стояли точно напротив элементов первого списка.
Примерно так:
СПИСОК1 СПИСОК2
Строка 1 Строка1
Строка2стро Строка2
ка2строка2с
трока2строк
а2строка2
Строка3 Строка3

Т.е. как видно, элемент "строка2" 1-го списка занимает четыре строчки, но элемент "строка3" 2-го списка все равно начинается строго напротив 3-го элемента 1-го списка.
Как это сделать? Проще было бы с помощью таблицы сделать разбивку, но я не хочу этого длать, т.к. это несколько дурной стиль.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
logme
logme
Topic Starter сообщение 15.4.2012, 14:17; Ответить: logme
Сообщение #2


[attachment=38825:NEW.png]

Т.е. как видно из картинки, нужно чтобы строка "3. row" зеленого списка была на уровне начала строки "3. vvvvvvv" серого списка.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 15.4.2012, 14:20; Ответить: Azazaza_hb
Сообщение #3


вот может скриптом подойдет?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
ol{width:200px; float:left}
</style>
</head>

<body>
<ol>
<li>Строка1</li>
<li>Строка2 Строка2 Строка2 Строка2 Строка2 Строка2</li>
<li>Строка3</li>
<li>Строка4</li>
</ol>
<ol>
<li>Строка1</li>
<li>Строка2</li>
<li>Строка3 Строка3 Строка3 Строка3 Строка3 Строка3 Строка3 </li>
</ol>
<script type="text/javascript">
var ols = document.getElementsByTagName('ol');
var li1 = ols[0].getElementsByTagName('li');
var li2 = ols[1].getElementsByTagName('li');
var len;
if(li1.length >= li2.length){
len = li2.length
}
else{
len = li1.length
};
for(var i=0; i<len; i++){
if(li1[i].offsetHeight > li2[i].offsetHeight){
li2[i].style.height = li1[i].offsetHeight + 'px'
}
else{
li1[i].style.height = li2[i].offsetHeight + 'px'
}
};
</script>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
logme
logme
Topic Starter сообщение 15.4.2012, 14:27; Ответить: logme
Сообщение #4


Гм, почему-то думаю что можно как-то изящее и проще сделать, не прибегая к помощи скриптов. Скрипты уже на совсем крайний вариант.
У меня мысль была, как бы подружить соответствующие элементы из двух разных списков, т.е. эл 1 из первого списка с эл-ом 1 второго списка и т.д., и сделать их выравнивание на одной строке. Думаю теперь как это реализовать. Присвоить например, одинаковый класс одинаковым элементам из разных списков?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
logme
logme
Topic Starter сообщение 15.4.2012, 14:55; Ответить: logme
Сообщение #5


Решение найдено, спасибо :)
P.S. как и думал, обошлось без скриптов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 15.4.2012, 15:12; Ответить: Azazaza_hb
Сообщение #6


какое же оно?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DelphinPRO
DelphinPRO
сообщение 16.4.2012, 17:25; Ответить: DelphinPRO
Сообщение #7


напрашивается использование списка определений DL
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 16.4.2012, 18:10; Ответить: Azazaza_hb
Сообщение #8


там вроде именно нумерованный список нужен был, и я так думаю, что там статичные списки, и logme задал им высоту вручную, или что-то типа того..

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Куплю выгрузку из serp stat для одного домена
serp stat для одного домена
1 Smartseowork 1563 24.5.2022, 20:49
автор: Latinos
Открытая тема (нет новых ответов) Дизайн кнопок, доработка элементов графики
Требуется исполнитель
5 ARsHi 1439 6.10.2020, 20:04
автор: JOHNY
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыДизайн сайта и отдельных элементов
Все в срок
145 Infe 70394 20.10.2018, 16:51
автор: Infe
Открытая тема (нет новых ответов) Аудит на соответствие сайта требованиям Google News
Качественные консультации по Google News
0 vvovvo 2811 29.9.2016, 15:20
автор: vvovvo
Открытая тема (нет новых ответов) Изменение внешнего вида элементов
0 vantusxyz 5935 26.6.2016, 1:03
автор: -vantusxyz-


 



RSS Текстовая версия Сейчас: 20.4.2024, 2:15
Дизайн