jQuery Mobile - 將頁面拆分爲4個部分

我使用jQuery移動，並且我想將頁面拆分爲四個部分（Fiddle），並且啓用了頁眉和頁腳。但不知何故，它不工作在這裏.. My Fiddle jQuery Mobile - 將頁面拆分爲4個部分

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script> 
     <link rel="stylesheet" href="app.css"/> 
    </head> 



    <body> 
     <div data-role="page"> 
      <div data-role="header" data-rel="back"> 

      </div> 

      <div id="div1" class="a"></div> 
      <div id="div2" class="a"></div> 
      <div id="div3" class="a"></div> 
      <div id="div4" class="a"></div> 

      <div data-role="footer"> 
       <h4>Page Footer</h4> 
      </div> 

     </div> 
    </body>

CSS

html, body { height: 100%; padding: 0; margin: 0; } 
div.a { width: 50%; height: 50%; float: left; } 
#div1 { background: #DDD; } 
#div2 { background: #AAA; } 
#div3 { background: #777; } 
#div4 { background: #444; }

我只能看到尾，但同樣在頂部。我在這裏做錯了什麼？

來源

2013-08-25 Ash

嗯......你們提供的小提琴似乎不錯。我分四部分看這個頁面。你能提出問題嗎？ –

這是http://jsfiddle.net/Cdbxc/ – Ash

你可以修理小提琴嗎？ JSFiddle實際上並不知道'app.css'在哪裏。你必須將其粘貼到CSS框中。 –

您還需要設置height: 100%;到主父DIV

demo

在演示中，如果你刪除高度：100％;從主div，那麼它將無法正常工作。

來源

2013-08-25 04:58:41

使用jQM網格佈局。

Demo

<div class="ui-grid-a"> 
    <div id="div1" class="ui-block-a">A1</div> 
    <div id="div2" class="ui-block-b">B1</div> 
    <div id="div3" class="ui-block-a">A2</div> 
    <div id="div4" class="ui-block-b">B2</div> 
</div>

資源：Grids

來源

2013-08-25 11:02:32 Omar

jQuery Mobile - 將頁面拆分爲4個部分

回答

相關問題