Ajaxschmiede.de

Ryan Doherty hat im Mozilla Webdev-Blog einen tollen Artikel darüber geschrieben, wie er die geniale CSS-Eigenschaft display: inline-block, die bisher nur von den aktuellsten Browsern (Firefox 3, Opera 7, Safari 3) unterstützt wird, nachgebaut hat.

Inline-Block ist – wie der Name bereits suggestiert – eine Mischung der Elementtypen block und inline.

Während Block-Elemente (h1-h6, div, usw.) im Textfluß stets neue Zeilen und größere Abstände zum nächstfolgenden Element erzeugen, erzeugen inline-Elemente (a, u, i, img, usw.) keine neue Zeile ordnen sich nebeneinander statt untereinander an.

Inline-Elemente belegen nur den Platz, den sie auch wirklich benötigen, und lassen sich in Höhe und Breite nicht beeinflußen. Einzige Ausnahme ist das img-Elemente, das zu den inline-Elementen gezählt wird. Dieses ist aber in Wirklichkeit ein Mittelding zwischen block und inline, also inline-block.

Elementen dieser Art verhalten sich wie inline-Elemente, lassen sich also in den Ausmaßen verändern, verursachen jede keine neue Zeile und ordnen sich somit nebeneinander an. Besondern attraktiv ist diese Darstellungsform für Fotogalerien, die bisher meist umständlich über Tabellenlayout umgesetzt wurden.

Und hier ist nun der Code für die perfekte Galerie, die vollständig auf CSS basiert:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>