goog.demos.inline_block_standards.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of google-closure-library

The Google Closure Library is a collection of JavaScript code designed for use with the Google Closure JavaScript Compiler. This non-official distribution was prepared by the ClojureScript team at http://clojure.org/

There is a newer version: 0.0-20230227-c7c0a541

Show newest version





  goog.style.setInlineBlock in standards mode
  
  
  
  
  


  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
    DIVs
    inlined in my text here?  I mean, I thought
    DIVs
    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
    DIVs
    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.