[CSS] łamanie wiersza przed elementem z inline-block - jak?

eGospodarka.pl › Grupy › pl.comp.www › [CSS] łamanie wiersza przed elementem z inline-block - jak? › [CSS] łamanie wiersza przed elementem z inline-block - jak?

Data: 2011-02-14 14:41:58
Temat: [CSS] łamanie wiersza przed elementem z inline-block - jak?
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
Mam listę definicji, w której po każdym <dt> następuje jeden lub dwa
<dd>. Chciałbym, żeby każdy <dt> był w nowej linii. Po <dt> chciałbym
mieć odstęp zmiennej szerokości. Po jakiejś odległości od lewej
krawędzi <dt> zaczynają się <dd>, z których każdy zajmuje tyle miejsce
ile mu trzeba.

Dzięki dt, dd {display:inline} i odpowiednio spreparowanemu dt::before
jestem w stanie wymusić łamanie wierszy przed każdym dt. Jednak wtedy
nie mogę upewnić się, żeby dd były wyrównane względem siebie.

Jeśli wszystkiemu nadam display: inline-block, wtedy mogę wyrównać dd,
jednak pojawia się problem z łamaniem wiersza przed dt. Mogę to obejść
poprzez nadanie każdemu elementowi określonej szerokości, która w
obrębie wiersza będzie sumować się do około 100% (następne dt się nie
zmieści i zostanie przeniesione do następnego wiersza), jednak mam
wrażenie że to nie jest najlepsze możliwe rozwiązanie i w każdej chwili
może się posypać.

Czy można wymusić łamanie wiersza przed określonym elementem o
właściwości display: inline-block? Jak to zrobić? Interesują mnie tylko
nowe wersje porządnych przeglądarek (nie musi działać w IE).
Czy przy takiej strukturze dokumentu jest to po prostu niewykonalne
i mogę od razu wrócić do tabelki (przy użyciu której będzie to wręcz
banalnie proste, niestety...)?

Kod na którym pracuję najbliższy temu, co chcę osiągnąć (kolory dodane
dla czytelności):

#v+
<!DOCTYPE html>
<html>
<head><title>Testowa</title>
<style>
dl, dd, dt, img {
margin: 0;
padding: 0;
}
dl {
display: block;
}
dd, dt {
display: inline-block;
}
dt {
width: 20%;
background-color: green;
}
dd {
background-color: gray;
}
dd.id {
width: 20%;
}
dd.status {
width: 50%;
}
</style>
</head>
<body>
<dl>
<dt><abbr title="Extensible Messaging and Presence Protocol">XMPP</abbr></dt>
<dd class="id">JID</dd>
<dd class="status"><img width='16' height='16' src=''alt='status JID:'
title=''></dd>
<dt><abbr title="Gadu-Gadu">GG</abbr></dt>
<dd class="id">numerek GG</dd>
<dd class="status"><img width='20' height='20' src='' alt='status GG:' title=''>
<dt>e-mail</dt>
<dd class="id"><a href="mailto:mail">m...@e...com</a></dd>
</dl>
</body>
</html>
#v-
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski