Blogasek by Piotrek Reinmar Koszuliński

Będzie krótko, bo jutro święto jakieś :)

Od bardzo dawna przy wielu stronach natrafiałem na problem w jaki sposób ostylować listę definicji opisów (patrz komentarze) dl, tak aby elementy dt wyświetlały się na lewo od elementów dd. Przy czym kod musiał spełniać warunki:

• lista musiała się nie rozsypywać w przypadku różnej wysokości elementów dt i dd,
• szerokość listy mogła być zmienna,
• ustaloną szerokość miały elementy dt. Elementy dd miały się rozszerzać do maksymalnej dostępnej szerokości.

Nigdy nie miałem ochoty się w ten problem zagłębiać i jeśli już stałem pod ścianą to każdy "wiersz" takiej listy pakowałem do osobnego elementu dl, co rozwiązywało najtrudniejszy problem, czyli odpowiedniego ułożenia elementów w pionie. W sumie, to z tego niezbyt pięknego rozwiązania korzystałem często, bo w ten sposób używam listy definicji do tworzenia formularzy.

Ostatnio postanowiłem jednak rozwiązać swój odwieczny problem i po wielu próbach — między innymi z różnymi kombinacjami floatów, display:inline-block i wieloma dziwactwami — udało mi się znaleźć kilka rozwiązań, które działały, ale np. do momentu kiedy nie rozszerzyło się całej listy do sporej szerokości, albo nie nastąpił jakiś przypadek stosunków szerokości. Wpadłem jednak przed chwilą na rozwiązanie, które działa w każdym interesującym mnie przypadku i aż chcę się pochwalić :).

Skrócony kod HTML:

<dl>
	<dt>Widelec</dt>
	<dd>Jest biały i leży na moim biurku.</dd>
	<dt>Widelec</dt>
	<dd>Jest biały i leży na moim biurku.</dd>
...
</dl>

I skrócony kod CSS:

dl {
	width: 70%;
	min-width: 40em;
	overflow: hidden;
	...
}
dt {
	float: left;
	width: 15em;
	clear: both;
	...
}
dd:after {
	content: '\00a0';
	display: block;
	clear: left;
	float: right;
	height: 0;
	width: 0;
}
dd {
	margin: 0 0 0.5em 18em;
	clear: right;
	...
}

Działający przykład.

Cała magia zawiera się w regule dla dd:after. To ona powoduje, że jeśli element dt jest wyższy od następującej po nim definicji, to następna definicja jest wyświetlana w odpowiednim miejscu (nie przeskakuje ponad swój temat).

Wesołego jajka. Idę spać :)