我想给widh我的布局网格

我想给第二列的宽度，但我无法做到这一点。任何帮助是可观的。代码如下：我想给widh我的布局网格

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<style> 
.ui-block-a { 
    background-color: lightgray; 
    border: 1px solid black; 
    height: 100px; 
    font-weight: bold; 
    text-align: center; 
    padding: 30px; 
} 
.ui-block-b { 
    background-color: lightgray; 
    border: 1px solid black; 
    height: 100px; 
    font-weight: bold; 
    text-align: center; 
    padding: 30px; 
} 
</style> 
</head> 
<body> 

<div data-role="page" id="pageone"> 
    <div data-role="header"> 
    <h1>Customized Columns</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    <p>Three-column Styled Layout:</p> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><span>First Column</span></div> 
     <div class="ui-block-b"><span>Second Column</span></div> 

    </div> 
    </div> 
</div> 

</body> 
</html>

我能够更改列的高度，但我无法改变它的宽度是有我错过任何东西吗？请帮忙。
谢谢。

来源

2015-05-19 Rakshit Nawani

这是工作的罚款http://jsfiddle.net/2av2ny1d/。问题是什么？哪一个你不能给宽度 –

请提供完整的CSS代码或至少上述HTML代码中提到的css类 – divy3993

@ketan我想要一个行和两个列，第二列必须有更大的宽度，然后第二个 –

您可以使用display: table-cell;为div和设置第二个div的宽度，如：width: 800px;它将解决您的问题。

.ui-block-a { 
    background-color: lightgray; 
    border: 1px solid black; 
    height: 100px; 
    font-weight: bold; 
    text-align: center; 
    padding: 30px; 
    display: table-cell; 
} 
.ui-block-b { 
    background-color: lightgray; 
    border: 1px solid black; 
    height: 100px; 
    font-weight: bold; 
    text-align: center; 
    padding: 30px; 
    width: 800px; 
    display: table-cell; 
}

检查Updated Fiddle Here.

来源

2015-05-19 05:50:21 ketan

添加以下CSS

CSS

.ui-content .ui-block-b { 
    width: 276px; /*custom width*/ 
}

来源

2015-05-19 05:28:40 vas

是的，我申请了你的答案，但没有变化 –

你可以给！重要的和检查 – vas

我想你想是这样的：

WORKING : DEMO

HTML

<div data-role="page" id="pageone"> 
    <div data-role="header"> 
    <h1>Customized Columns</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    <p>Three-column Styled Layout:</p> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a"><span>First Column</span></div> 
     <div class="ui-block-b"><span>Second Column</span></div> 
    </div> 
    </div> 
</div>

CSS

body,html,ui-content 
{ 
    width:100%; 
    margin:0; 
} 
.ui-content 
{ 
    width:100%; 
    overflow:auto; 
    float:left; 
    display:inline-block; 
} 
.ui-block-a, .ui-block-b { 
    float:left; 
    position:relative; 
    background-color: lightgray; 
    border: 1px solid black; 
    height: 100px; 
    width:40%; /*You can choice as per your requirement */ 
    padding-top:50px; 
    font-weight: bold; 
    text-align: center; 
} 
.ui-block-b { 
    width:59.5%; /*You can choice as per your requirement */ 
}

来源

2015-05-19 05:40:20 divy3993

默认jquery.mobile-1.4.5.min.css申请 width: 33.333%; 到两个类（UI - 嵌段 - 一个& UI块-a）中，如果你想自定义宽度，那么你已经把 width: xxxpx !important;。

来源

2015-05-19 05:45:10

我想给widh我的布局网格

回答

相关问题