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

Posted

技术标签:

【中文标题】ui-grid 块内小部件的底部对齐方式【英文标题】：Bottom alignment of widgets inside ui-grid blocks 【发布时间】：2018-08-21 14:57:04 【问题描述】：

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

下面是两个flipswitch 小部件的示例，它们具有不同文本长度的标签。如何保持小部件始终垂直对齐？ （纯 CSS，但不支持 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>

【问题讨论】：

【参考方案1】：

您可以在父级上使用display:table，在子级上使用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>

【讨论】：

你有解释为什么当我将块宽度设置为 49% 时我的解决方案有效吗？【参考方案2】：

虽然我无法完全理解原因，但将 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>

【讨论】：

【参考方案3】：

回复your answer：

虽然我不能完全理解为什么，将块宽度设置为 49% 而不是 50% 完成这项工作

看看这些：

一系列inline-block 元素的格式与您通常的格式相同 HTML 之间会有空格

——Fighting the Space Between Inline Block Elements by CSS-TRICKS

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

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

因此，将.ui-block-a 和.ui-block-b 的display 设置为inline-block 使您能够垂直对齐（其父/容器的）底部的元素——通过将它们的vertical-align 设置为bottom.

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

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

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

删除空格 
</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 
.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;

更多详情见：

css-tricks.com/fighting-the-space-between-inline-block-elements/

davidwalsh.name/remove-whitespace-inline-block

/* 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-grid 块内小部件的底部对齐方式的主要内容，如果未能解决你的问题，请参考以下文章

如何将文本对齐到 IconButton 小部件的中心底部？

Xamarin 以编程方式在底部形成垂直对齐图像

如何使用中心和列小部件内的对齐小部件在底部有两个按钮？

如何从底部到顶部更改 Android Snackbar 的初始对齐方式？

网站滚动公告信息的实现方式

35displayinline-block的上下对齐方式