eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.www[CSS] Autorozmieszczanie div'ów › Re: [CSS] Autorozmieszczanie div'ów
  • Path: news-archive.icm.edu.pl!news.gazeta.pl!not-for-mail
    From: Paweł Piskorz <n...@p...nie?>
    Newsgroups: pl.comp.www
    Subject: Re: [CSS] Autorozmieszczanie div'ów
    Date: Sat, 07 Nov 2009 17:01:18 +0100
    Organization: "Portal Gazeta.pl -> http://www.gazeta.pl"
    Lines: 62
    Message-ID: <hd45kl$m3b$1@inews.gazeta.pl>
    References: <hd3ri7$ghc$1@inews.gazeta.pl>
    NNTP-Posting-Host: 213-238-93-218.adsl.inetia.pl
    Mime-Version: 1.0
    Content-Type: text/plain; charset=UTF-8
    Content-Transfer-Encoding: 8bit
    X-Trace: inews.gazeta.pl 1257609685 22635 213.238.93.218 (7 Nov 2009 16:01:25 GMT)
    X-Complaints-To: u...@a...pl
    NNTP-Posting-Date: Sat, 7 Nov 2009 16:01:25 +0000 (UTC)
    X-User: uhorek
    In-Reply-To: <hd3ri7$ghc$1@inews.gazeta.pl>
    User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.8.1.23)
    Gecko/20090812 Thunderbird/2.0.0.23 Mnenhy/0.7.6.666 Hamster/2.1.0.11
    Xref: news-archive.icm.edu.pl pl.comp.www:394097
    [ ukryj nagłówki ]

    Czarny_Zielony_Ziemniak wrote:
    > Jak uzyskać efekt aby div'y rozmieściły się automatycznie w linii i
    > automatycznie dopasowały odstępy między sobą:

    <div id="rodzic">
    <div>Twój div</div>
    <div>Twój div</div>
    <div>Twój div</div>
    ...
    </div>

    #rodzic {
    text-align:justify;
    text-align-last:justify;
    }

    #rodzic > div {
    display:inline-block;
    width:200px;
    }

    Niestety poleci tylko w IE8. Jeżeli nie chce Ci się czekać aż
    Gecko/Opera/WebKit dorobią się obsługi text-align-last, to trzeba będzie
    dołożyć po divie:
    <div id="rodzic">
    <div class="boxWrapper">
    <div class="box">Twój div</div>
    </div>
    <div class="boxWrapper">
    <div class="box">Twój div</div>
    </div>
    <div class="boxWrapper">
    <div class="box">Twój div</div>
    </div>
    ...
    </div>

    #rodzic {
    display:table;
    width:100%;
    }

    #rodzic div.boxWrapper {
    display:table-cell;
    }

    #rodzic div.box {
    width:200px;
    margin:0 auto;
    }

    Na IE6 i 7 nie masz co liczyć.

    > Przykład:
    >
    > HTML
    >
    > <div id="body">
    > <div id="box_1">div1</div>
    > <div id="box_1">div2</div>

    id ma być unikalne i w całym dokumencie może wystąpić tylko raz. Użyj klas.

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj

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: