eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.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

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: