2011-03-04 104 views

回答

0

你可以简单的通过CSS指定此...

例如:

CSS

#wrapper {width:95%} 

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
</head> 
<body> 

<div id="wrapper"> 
<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Page content goes here.</p>  
    </div><!-- /content --> 

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

</body> 
</html> 

您还可以通过这样做动态:

$("div[data-role='page']").css('width',$("#container_element").innerWidth()+"px"); 
+1

自'data-role =“页面指定'#wrapper'的宽度不起作用''div有'position:absolute'。你提供的jQuery片段确实会改变宽度,但它保留在页面的左上角,而不管它的容器位于何处。 – mindeavor 2011-03-06 20:03:57

+1

更不用说那是围绕着jQuery Mobile提供的框架。当您只需使用已有的包装或类时,无需添加额外的包装或类。 – commadelimited 2012-03-14 19:53:47

0

尺寸是自动的。如果在页面div之外创建div并将其设置为浮点型和宽度(以像素为单位),则它应该在页面div旁边正确显示。

3

只需在CSS文件中设置此行。让它变得非常简单。如果喜欢,则将最大宽度更改为宽度。

.ui-page { max-width:500px; }