Список[укрощение строптивого]

geirbyfc · April 30, 2012

Добрый день, уважаемые форумчане!

Вопрос по сабжу следующий: есть список, например, в контейнере из div. Возможно ли ограничить высоту "блока" списка <ul></ul> таким образом, чтобы он часть элементов списка перекидывал вправо или влево по ширине контейнера? Другими словами, автоматически формировался в две или более колонки.

Если это невозможно какое решение вы посоветуете, исходя из текущей задачи (разместить n-элементы из одной в две и более колонки автоматически)?

Колонка, собственно, получается из простого перечисления элементов (например, "Рис", "Мука", "Масло") для которых я счел разумным применить разметку "список".

Было:

1. Рис

2. Мука

3. Масло

4. Мясо

...

Стало:

1. Рис 3.Масло

2. Мука 4.Мясо

...

hypnocolor · April 30, 2012

http://neolot.com/narabotki/autocolumnlist-jquery-plugin-dlya-razdeleniya-spiskov-na-kolonki

http://www.artlebedev.ru/tools/technogrette/html/list2columns/

Sensei · April 30, 2012

можно и без js

<!DOCTYPE HTML>

<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style>
		ul#nav {
			display:block;
			float:left;
		}
		ul#nav,ul#nav ul {
			list-style:none;
			margin:0;
		}
		ul#nav .subs {
			display:none;
			float:left;
			left:0;
			padding:0 6px 6px;
			position:absolute;
		}
		ul#nav li:hover>* {
			display:block;
		}
		ul#nav li:hover {
			position:relative;
		}
		ul#nav ul .subs {
			left:100%;
			position:absolute;
			top:0;
		}
		ul#nav ul {
			padding:0 5px 5px;
		}
		ul#nav .col {
			float:left;
			width:50%;
		}
		ul#nav li {
			display:block;
			float:left;
			font-size:0;
			white-space:nowrap;
		}
		ul#nav a {
			cursor:pointer;
			display:block;
			font-size:13px;
			font-weight:bold;
			padding:8px 18px;
		}
	</style>
</head>

<ul id="nav">
	<li><a href="#">NAVEDI</a>
		<div class="subs">
			<div class="col">
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
				</ul>
			</div>
			<div class="col">
				<ul>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
				</ul>
			</div>
		</div>
	</li>
</ul>

Edited April 30, 2012 by Sensei

mrnobody · April 30, 2012

Может сделать медиа-запросом (@media), чтобы при уменьшении высоты к элементу li применялось правило: li{float: left;}.

Edited April 30, 2012 by mrnobody

SelenIT · April 30, 2012

Для жестко фиксированной высоты можно так.

geirbyfc · May 1, 2012

Всем спасибо. Количество ответов предполагает наличие решения)

Sign In

Список[укрощение строптивого]

Question

geirbyfc

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

geirbyfc

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information