[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?

Path: news-archive.icm.edu.pl!news.rmf.pl!agh.edu.pl!news.agh.edu.pl!news.onet.pl!.PO
STED!not-for-mail
From: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>
Newsgroups: pl.comp.www
Subject: [CSS] łamanie wiersza przed elementem z inline-block - jak?
Date: Mon, 14 Feb 2011 15:41:58 +0100
Organization: http://onet.pl
Lines: 95
Message-ID: <20110214154158.6bf7a6c7@pingwin>
Reply-To: m...@g...com
NNTP-Posting-Host: emw166.neoplus.adsl.tpnet.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
X-Trace: news.onet.pl 1297694533 21653 83.21.242.166 (14 Feb 2011 14:42:13 GMT)
X-Complaints-To: n...@o...pl
NNTP-Posting-Date: Mon, 14 Feb 2011 14:42:13 +0000 (UTC)
X-Newsreader: Claws Mail 3.7.8 (GTK+ 2.20.1; x86_64-pc-linux-gnu)
Xref: news-archive.icm.edu.pl pl.comp.www:398257
[ ukryj 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