Question

我正在使用JQM网格进行分组和分割内容。有没有办法将内容与ui-grid-a或ui-grid-b的底部对齐？我尝试了许多提议的解决方案，使ui-block-a和ui-block-b div的高度相同，但它们都没有与JQM网格系统很好地配合使用。

以下是两个flipswitch小部件的示例，这些小部件具有不同文本长度的标签。如何让小部件始终垂直对齐？（纯CSS但没有Flex赞赏）

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
    <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
    <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
    <label for="flip-checkbox-2">Flipswitch 2:</label>
    <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

＆＃13;

Answer 1

您可以在父级上使用display:table，为子级使用display:table-cell：

＆＃13;

.ui-grid-a.align-widgets{
  display: table;
}
.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: table-cell;  
  float: none;  
  vertical-align: bottom;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a align-widgets">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
            <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-2">Flipswitch 2:</label>
            <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

＆＃13;

Answer 2

回复your answer：

虽然我无法完全理解原因，但将块宽设置为49％而不是50％的工作

检查这些：

一系列格式与您通常格式化的inline-block元素 HTML将在它们之间有空格

- CSS-TRICKS的Fighting the Space Between Inline Block Elements

使用inline-block时产生的一个问题是空白在HTML中成为屏幕上的视觉空间。

大卫·沃尔什

- Remove Whitespace Between Inline-Block Elements

因此，将display和.ui-block-a的{{1}}设置为.ui-block-b，您可以垂直对齐底部（其父级/容器）的元素 - 将inline-block设置为vertical-align。

但是，将bottom设置为width会将50%推到.ui-block-b以下，因为元素之间的（白色）空格，在HTML代码中：

.ui-block-a

有几种方法可供选择以解决该问题：

删除空格

</div>
<div class="ui-block-b">

或使用＆＃34;评论技巧＆＃34; （我在代码片段中使用了这个）：

</div><div class="ui-block-b">

在</div><div class="ui-block-b">元素上应用负边距

inline-block

在父母上使用 .ui-grid-a.align-widgets>.ui-block-a, .ui-grid-a.align-widgets>.ui-block-b { display: inline-block; vertical-align: bottom; float: none; width: 50%; margin-right: -4px; }

font-size: 0

有关详细信息，请参阅：

＆＃13;

.ui-grid-a.align-widgets {
  font-size: 0; /* Removes the `inline-block` gaps. */
}

.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
  font-size: 12px;
}

＆＃13;

/* JQM Better alignment for grids with long heading text */
.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 50%;
}

＆＃13;

Answer 3

虽然我无法完全理解为什么，将block宽度设置为49％而不是50％可以完成这项任务：

＆＃13;

/* JQM Better alignment for grids with long heading text */
.ui-grid-a.align-widgets>.ui-block-a,
.ui-grid-a.align-widgets>.ui-block-b {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 49%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div class="ui-grid-a align-widgets">
        <div class="ui-block-a">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-1">Flip toggle switch with more caption text:</label>
            <input data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox">
          </div>
        </div>
        <div class="ui-block-b">
          <div class="ui-bar ui-bar-a">
            <label for="flip-checkbox-2">Flipswitch 2:</label>
            <input data-role="flipswitch" name="flip-checkbox-2" id="flip-checkbox-2" type="checkbox">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>

＆＃13;

ui-grid块内部小部件的底部对齐

3 个答案: