goog.style.setInlineBlock in standards mode
This is a demonstration of the goog-inline-block CSS style.
This page is in standards mode.
Click here for quirks mode.
Hey, are these really
DIV
s
inlined in my text here? I mean, I thought
DIV
s
were block-level elements, and you couldn't inline them...
Must be that new
goog-inline-block
style... (Hint: Try resizing the window to see the
DIV
s
flow naturally.)
Arv asked for an inline-block DIV with more interesting contents, so here
goes:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Donec rhoncus neque ut
neque porta consequat.
In tincidunt tellus vehicula tellus. Etiam ornare nunc
vel lectus. Vivamus quis nibh. Sed nunc.
On FF1.5 and FF2.0, you need to wrap the contents of your
inline-block element in a DIV or P with fixed width to get line
wrapping.
These are
SPANs
with the
goog-inline-block
style applied, so you can style them like block-level elements.
For example, give them
10px margin, a
10px border, or
10px padding.
I used
vertical-align: middle
to make them all line up reasonably well.
(Except on Safari 2. Go figure.)
This is what the same content looks like without goog-inline-block:
These are
SPANs
with the
goog-inline-block
style applied, so you can style them like block-level elements.
For example, give them
10px margin, a
10px border, or
10px padding.
I used
vertical-align: middle
to make them all line up reasonably well.
(Except on Safari 2. Go figure.)
Click here to use goog.style.setInlineBlock() to apply the inline-block style to these SPANs.
Works on Internet Explorer 6 & 7, Firefox 1.5, 2.0 & 3.0 Beta, Safari 2 & 3,
Webkit nightlies, and Opera 9.
Note: DIVs nested in SPANs don't work on Opera.