我想給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我的佈局網格

回答

相關問題