Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-12 08:33:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

edit

Browse source
This commit is contained in:
PattyToland 2010-10-15 22:48:47 -04:00
parent 51c4f4a5e2
commit 3102a75d63
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/content/content-grids.html
View file

@ -22,7 +22,7 @@
<p>There are two preset configurations layouts &mdash; two-column (using the <code>class</code> of <code>ui-grid-a</code>), and three-column (using the <code>class</code> of <code>ui-grid-b</code>) &mdash; that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.</p>
<h2>Two column grids</h2>
<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code> and add two child containers inside that are classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second:</p>
<pre><code>
&lt;div class=&quot;ui-grid-a&quot;&gt;
@ -40,9 +40,9 @@
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
</div><!-- /grid-a -->
<p>As you see above, by default grid blocks have no style appearance; they simply present content side-by-side.</p>
<p>As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.</p>
<p>The grid classes can be applied to any container. In this next example, we add <code>grid-a</code> to a <code>fieldset</code> to make the two button inside stretch to 50% of the screen width:</p>
<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>
<pre><code>
&lt;fieldset class=&quot;ui-grid-a&quot;&gt;