Question

我正在使用Ionic 2，我正在尝试创建一个垂直进度条组件 - 说明一个坦克级别。

这是我到目前为止所做的：

tank-bar {
    .progress-outer {
        height: 96%;
        margin: 10px 2%;
        padding: 3px;
        text-align: center;
        background-color: #f4f4f4;
        border: 2px solid #dcdcdc;
        color: dark;
        border-radius: 20px;
    }

    .progress-inner {
        min-height: 15;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        border-radius: 20px;
        background-color: map-get($colors, secondary);
    }
}

不幸的是，它还没有完全存在，在浏览器中看起来像这样：

我想从底部而不是从外部div的顶部显示绿色部分（百分比已满）。

任何帮助都会非常感激，我在CSS和Sass上仍然非常糟糕，但是试图通过教程变得更好。

编辑*

HTML如下：

<div class="progress-outer">
    <div class="progress-inner" [style.height]="Level + '%'">
        {{Level}}%
    </div>
</div>

Answer 1

如果您修改CSS以使外部容器相对，并且内部容器绝对定位并锚定在其中的底部，如下所示：

.progress-outer {
    height: 96%;
    margin: 10px 2%;
    padding: 3px;
    text-align: center;
    background-color: #f4f4f4;
    border: 2px solid #dcdcdc;
    color: dark;
    border-radius: 20px;
    position: relative;
}

.progress-inner {
    min-height: 15;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px;
    border-radius: 20px;
    background-color: map-get($colors, secondary);
    position: absolute;
    bottom: 0;
}

它应该有用。

请注意以下更改：

position: relative;

.progress-outer

中的

和

position: absolute;
bottom: 0;

.progress-inner

中的

Answer 2

将孩子定位为其相对父母的绝对位置将允许您指定它所坚持的位置。这带来了一些捕获，包括需要指定它的宽度，因为它已经从正常的文档流程中取出（通常会测量其块宽度）。

// Spacing between the edges of outer/inner, since
// padding values will be ignored with position: absolute.    
$offest: 2px;
$fullOffset: $offset * 2;

tank-bar {

    .progress-outer{ 
        position: relative;
        // etc...
    }
    .progress-inner{
        position: absolute;
        bottom: $offset;
        left: $offset;
        width: calc(100% - #{$fullOffset});

        // Include padding/margins in the width calculations of this child element.
        box-sizing: border-box;

        // etc...
    }

}

我添加了一点偏移量变量，以便给出我在样本中看到的一些空间。你可以删除/修改它，如果它实际上不是你想要的：）

Answer 3

您可以使用flexbox布局。将父级的display规则设置为flex，将align-items规则设置为flex-end。另外，请务必将孩子的flex规则设置为0 1 100%。

这是一个例子

＆＃13;

let prog = document.querySelector('.progress-inner')

for (var i = 0; i < 100; i++) {
  (function(i) {
    setTimeout(function() {
      prog.style.height = i + 1 + '%'
      prog.textContent = i + 1 + '%'
    }, 100 * i)
  }(i))
}

＆＃13;

.progress-outer {
  display: flex;
  align-items: flex-end;
  height: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 2px solid #dcdcdc;
  color: dark;
  border-radius: 20px;
}

.progress-inner {
  min-height: 15;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
  flex: 1 1 100%;
  padding: 5px;
  border-radius: 20px;
  background-color: lightgreen;

}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic-framework/2.0.0-beta.2/ionic.ios.min.css" rel="stylesheet"/>

<div class="progress-outer">
    <div class="progress-inner">
        0%
    </div>
</div>

＆＃13;

如何在外部div的底部定位内部div（垂直进度条）？

3 个答案: