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

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

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 5

1. 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>

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

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2011-02-14 15:17:55
Temat: Re: [CSS] łamanie wiersza przed elementem z inline-block - jak?
Od: satellite <p...@g...pl>

On 2011-02-14 15:41, Mirosław Zalewski wrote:

moze tak :

> dt {
> width: 20%;
> background-color: green;

display: block;

> }

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2011-02-14 15:57:09
Temat: Re: [CSS] łamanie wiersza przed elementem z inline-block - jak?
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

luty roku pamiętnego 2011, prawdopodobnie 14. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) satellite:

> On 2011-02-14 15:41, Mirosław Zalewski wrote:
>
> moze tak :
>
> > dt {
> > width: 20%;
> > background-color: green;
>
> display: block;
>
> > }

Wtedy będę miał łamanie linii przed i za <dt>, a ja chcę mieć tylko
przed.

Próbowałem też coś kombinować z floatami w takiej konfiguracji, ale kod
zaczyna się bardzo komplikować, a pożytku z tego żadnego.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2011-02-14 16:44:03
Temat: Re: [CSS] łamanie wiersza przed elementem z inline-block - jak?
Od: Tomasz Sowa <t...@t...NOSPAM.org>

Dnia Mon, 14 Feb 2011 16:57:09 +0100, Mirosław Zalewski napisał(a):

> Wtedy będę miał łamanie linii przed i za <dt>, a ja chcę mieć tylko
> przed.
>
> Próbowałem też coś kombinować z floatami w takiej konfiguracji, ale kod
> zaczyna się bardzo komplikować, a pożytku z tego żadnego.

Może tak:

dd, dt {
display: block;
float: left;
overflow: hidden;
margin: 5px 5px;
}
dt {
width: 20%;
background-color: green;
clear: left;
}
dd.status {
width: 20%;
}

Zresztą opisałeś to tak że nie wiadomo o co chodzi, następnym razem daj
rysunek.

--
Tomek

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2011-02-14 19:09:57
Temat: Re: [CSS] łamanie wiersza przed elementem z inline-block - jak?
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

luty roku pamiętnego 2011, prawdopodobnie 14. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Tomasz Sowa:

> Może tak:
> (ciach kod)

Tak -- działa właśnie tak jak chciałem :) .
Dziękuję.

> Zresztą opisałeś to tak że nie wiadomo o co chodzi, następnym razem
> daj rysunek.

OK, w przyszłości postaram się formułować podobne zapytania w sposób
zrozumiały także dla kogoś, kto nie jest mną.

Jeszcze raz dziękuję.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[ pokaż wiadomość z nagłówkami ]

do góry