时间戳

首页 > 解决方案 > 在卡片底部设置进度条

css - 在卡片底部设置进度条

问题描述

我正在寻找在这张卡的底部设置进度条。

我已经尝试过align-self: flex-end，margin-top: auto但没有成功。

现场示例： http: //jsbin.com/zopaxep/edit ?html,output

我怎样才能做到这一点？

标签： cssflexboxcss-position

解决方案

这是你要找的吗？如果是的话，我想这会起作用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Polymer 2.0 Basic Legacy Element">
    <base href="//polygit2.appspot.com/webcomponentsjs+:v1/custom-elements+webcomponents+:master/shadydom+webcomponents+:master/shadycss+webcomponents+:master/polymer+:2.0-preview/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./polymer/polymer.html">
    <link rel="import" href="./paper-progress/paper-progress.html">

    <dom-module id="my-app">
      <template>
        <style>

       paper-progress {
        width: 100%;
        --paper-progress-height: 5px;
        }

      .header {
        align-items: center;
        display: flex;
      }
      .header-bar {
        padding: 0 25px;
        justify-content: space-between;
        width: 100%;
        display: block;
      }

      .header-transition {
        padding: 24px 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
        margin: 5px 5px 0 5px;
      }

      .menu-adjustment {
        padding:20px;
        display: block;
        align-items: center;
      }

      .progress-container {
        margin-bottom: 0;
        align-self: flex-end;
        width: 100%;
      }
          
        </style>
     <div class="header-transition" id="mat" hiden$="[[opened]]">

      <div class="header-bar">
        <span class="header">Title</span>

        <div class="card-actions menu-adjustment">
          <div class="" id="headerContainer">
            <button>Submit</button>
          </div>
         

      </div>

      <div class="progress-container">
        <paper-progress indeterminate class="blue"></paper-progress>
      </div>

    </div>

    </template>
      <script>
        Polymer({
          is: 'my-app',
          properties: {
            preventLoad: {
              type: Boolean,
              value: false,
            },
          }
        });
      </script>
    </dom-module>

  </head>
  <body>
    <my-app></my-app>
  </body>
  </body>
</html>

编辑 1

将进度条定位到卡片底部

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Polymer 2.0 Basic Legacy Element">
    <base href="//polygit2.appspot.com/webcomponentsjs+:v1/custom-elements+webcomponents+:master/shadydom+webcomponents+:master/shadycss+webcomponents+:master/polymer+:2.0-preview/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./polymer/polymer.html">
    <link rel="import" href="./paper-progress/paper-progress.html">

    <dom-module id="my-app">
      <template>
        <style>

       paper-progress {
        width: 100%;
        --paper-progress-height: 5px;
        }

      .header {
        align-items: center;
        display: flex;
      }
      .header-bar {
        padding: 0 25px;
        justify-content: space-between;
        width: 100%;
        display: block;
      }

      .header-transition {
        padding: 24px 0;
        
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
        margin: 5px 5px 0 5px;
      }

      .menu-adjustment {
        
        display: block;
        align-items: center;
      }

      .progress-container {
        position:relative;
        bottom:0px;
        width: 100%;
      }
      .footer{
        position:relative;
        bottom:-23px;
        width:inherit;
        left:-25px;
        background-color:transparent;
      }
          
        </style>
        <div class="header-transition" id="mat" hiden$="[[opened]]">

          <div class="header-bar">
            <span class="header">Title</span>

            <div class="card-actions menu-adjustment">
              <div class="" id="headerContainer">
                <button>Submit</button>
              </div>


            </div>

            <div class="footer">
              
               <div class="progress-container">
                      <paper-progress indeterminate class="blue"></paper-progress
               </div>
            </div>
          </div>

        </div>

    </template>
      <script>
        Polymer({
          is: 'my-app',
          properties: {
            preventLoad: {
              type: Boolean,
              value: false,
            },
          }
        });
      </script>
    </dom-module>

  </head>
  <body>
    <my-app></my-app>
  </body>
  </body>
</html>

希望，这就是你要找的。

推荐阅读