ui-网格块内的小部件底部对齐

Question

我正在使用 JQM 网格对内容进行分组和划分。有没有办法将内容对齐到 ui-grid-a 或 ui-grid-b 的底部？我尝试了很多建议的解决方案来使 ui-block-a 和 ui-block-b div 具有相同的高度，但其中 none 与 JQM 网格系统配合得很好。

下面是一个示例，其中包含两个 flipswitch 小部件，它们具有不同文本长度的标签。如何让小部件始终垂直对齐？（纯 CSS 但 w/out Flex 表示赞赏）

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

Answer 1

虽然我不能完全理解为什么，但将 block 宽度设置为 49% 而不是 50% 就可以了：

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

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

Answer 2

您可以在 parent 上使用 display:table，在 children 上使用 display:table-cell :

.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;
}

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

Answer 3

回复：

Though I can't fully understand why, setting the block width to 49% instead of 50% does the job

检查这些：

a series of inline-block elements formatted like you normally format HTML will have spaces in between them

— Fighting the Space Between Inline Block Elements 来自 CSS-TRICKS

One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.

— Remove Whitespace Between Inline-Block Elements 大卫·沃尔什

因此将 .ui-block-a 和 .ui-block-b 的 display 设置为 inline-block 使您能够垂直对齐底部的元素（其 parent/container) — 通过将他们的 vertical-align 设置为 bottom.

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

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

您可以选择多种方法来解决该问题：

去掉spaces

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

或者使用 "comment trick"（我在代码片段中使用了这个）：

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

.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;
}

有关详细信息，请参阅：

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

<!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><!--
          This comment block removes the `inline-block` gaps, allowing you to use
          a 50% width on `.ui-block-a` and `.ui-block-b`.
        --><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>

ui-网格块内的小部件底部对齐

Bottom alignment of widgets inside ui-grid blocks

css

jquery

jquery-mobile

responsive-design