Question

我正在尝试为第二列提供宽度，但我无法做到。任何帮助都很明显。代码如下：

<!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>

我可以更改列的高度，但我无法更改它的宽度是否有任何我想念的东西？请帮忙。
谢谢。

Answer 1

您可以将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.

Answer 2

添加以下css

<强> CSS

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

Answer 3

我想你想要这样的东西：

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 */
}

Answer 4

默认情况下，jquery.mobile-1.4.5.min.css适用 width: 33.333%; 两个类（ui-block-a＆amp; ui-block-a），如果你想制作自定义宽度那么你就放了 width: xxxpx !important;。

我想给我的布局网格提供widh

4 个答案: