chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.style.setInlineBlock in quirks mode</title>
  <link rel="stylesheet" type="text/css" href="css/demo.css">
  <style type="text/css">
    .container {
      margin: 20px;
      border: 1px solid black;
      padding: 20px;
      background-color: #ffc;
    }
    .demo {
      margin: 4px;
      border: 1px solid blue;
      padding: 4px;
      color: red;
      background-color: white;
      vertical-align: middle;
    }
  </style>
  <script language="JavaScript" type="text/javascript" src="../base.js"></script>
  <script language="JavaScript" type="text/javascript">
    goog.require('goog.style');
  </script>
  <script language="JavaScript" type="text/javascript">
    function inlineBlockify(tag, className, parentElement) {
      goog.array.forEach(
          goog.dom.getElementsByTagNameAndClass(tag, className, parentElement),
          function(el) {
            goog.style.setInlineBlock(el);
          });
    }

    function inlineBlockifyAll() {
      inlineBlockify('span', 'demo', goog.dom.getElement('foo'));
    }
  </script>
</head>
<body>
  <h1>goog.style.setInlineBlock in quirks mode</h1>
  <p>
    This is a demonstration of the <code>goog-inline-block</code> CSS style.
    This page is in <strong>quirks</strong> mode.
    <a href="inline_block_standards.html">Click here for standards mode.</a>
  </p>
  <div class="container">
    Hey, are these really
    <div class="demo goog-inline-block">DIV</div>s
    inlined in my text here?  I mean, I thought
    <div class="demo goog-inline-block">DIV</div>s
    were block-level elements, and you couldn't inline them...
    Must be that new
    <div class="demo goog-inline-block">goog-inline-block</div>
    style...  (Hint:  Try resizing the window to see the
    <div class="demo goog-inline-block">DIV</div>s
    flow naturally.)
    Arv asked for an inline-block DIV with more interesting contents, so here
    goes:
    <div class="demo goog-inline-block">
      <div style="width:320px;font-size:80%;">
        <img src="../images/gears_bluedot.gif" alt="blue dot"
             style="float:left; margin: 0 1em 1em 0;"/>
        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.
        <strong>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.</strong>
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      These are
      <span class="demo goog-inline-block">SPAN</span>s
      with the
      <span class="demo goog-inline-block">goog-inline-block</span>
      style applied, so you can style them like block-level elements.
      For example, give them
      <span class="demo goog-inline-block" style="margin:10px;">10px margin</span>, a
      <span class="demo goog-inline-block" style="border-width:10px;">10px border</span>, or
      <span class="demo goog-inline-block" style="padding:10px;">10px padding</span>.
      I used
      <span class="demo goog-inline-block" style="">vertical-align: middle</span>
      to make them all line up reasonably well.
      (Except on Safari 2.  Go figure.)
    </p>
    <p>
      This is what the same content looks like <strong>without goog-inline-block</strong>:
    </p>
    <p id="foo">
      These are
      <span class="demo">SPAN</span>s
      with the
      <span class="demo">goog-inline-block</span>
      style applied, so you can style them like block-level elements.
      For example, give them
      <span class="demo" style="margin:10px;">10px margin</span>, a
      <span class="demo" style="border-width:10px;">10px border</span>, or
      <span class="demo" style="padding:10px;">10px padding</span>.
      I used
      <span class="demo" style="">vertical-align: middle</span>
      to make them all line up reasonably well.
      (Except on Safari 2.  Go figure.)
    </p>
    <p>
      <a href="#" onclick="inlineBlockifyAll();">Click here</a> to use <code>goog.style.setInlineBlock()</code> to apply the inline-block style to these SPANs.
    </p>
  </div>
  <p>
    Works on Internet Explorer 6 &amp; 7, Firefox 1.5, 2.0 &amp; 3.0 Beta, Safari 2 &amp; 3,
    Webkit nightlies, and Opera 9.
    <em><strong>Note:</strong> DIVs nested in SPANs don't work on Opera.</em>
  </p>
</body>
</html>