Question

问题：

尽管我添加了height: 100%，但要创建一条垂直线将两个对象分隔开，但不会出现，因为它没有高度。
为什么它没有填满我的顶部到底部的空间 div？是因为.card-body有height: auto吗？

审理过的案件：

我已经尝试过添加宽度，禁用弹性框，但没有任何效果，但是如果我在.card-body上添加特定的高度，它将起作用。

你呢知道不增加特定高度如何工作的解决方案吗？

.card {
  margin-bottom: 30px;
}

.card > .card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card > .card-header.light {
  color: #fff;
}

.card > .card-body {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}

.card > .card-body.server-status {
  display: flex;
  align-items: center;
}

.card > .card-body.server-status > .counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card > .card-body.server-status > .counter > span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}

        <div class="card">
          <div class="card-header light">
            Active Services
          </div>
          <div class="card-body server-status">
            <div class="counter">
              7/9
              <span>
                Servers running
              </span>
            </div>
            <div style="border-left:1px solid #0d2c4a;height:100%;"></div>
            <div class="chart">

            </div>
          </div>
        </div>

Answer 1

由于伸缩容器为If <cond> Then <commands> End If

，因此需要使其伸展

您可以删除100％的高度，我在分隔符中添加了一个类，它就归结为这个

align-items: center

如果您没有对齐中心，则默认情况下会工作，因为对齐项默认为拉伸，但是由于您将其更改为居中并且分隔线不包含内容，因此该行不显示。将分隔线本身设置为再次拉伸可以解决此问题，并且不需要额外的CSS

.divider {
  align-self: stretch;
}

.card {
  margin-bottom: 30px;
}

.card>.card-header {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  margin-bottom: 6px;
}

.card>.card-header.light {
  color: #fff;
}

.card>.card-body {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  -webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
  box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}

.card>.card-body.server-status {
  display: flex;
  align-items: center;
}

.card>.card-body.server-status>.counter {
  width: 50%;
  font-weight: 500;
  color: #95a0b7;
  font-size: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card>.card-body.server-status>.counter>span {
  font-size: 15px!important;
  color: #0d2c4a!important;
  text-transform: capitalize;
}

.divider {
  align-self: stretch;
}

Answer 2

您还可以将此CSS属性添加到CSS中...

.counter{
    border-right: 1px solid black;
}

Answer 3

请尝试使用"autoload-dev": { "files": [ "features/bootstrap/ProgressStepPrinter.php", ] },并使用CSS旋转它，而不是使用<div>。类似于：

<hr>

请参阅以下文档以获取帮助：https://www.w3schools.com/tags/tag_hr.asp

高度：100％;不适用于Flex Box

3 个答案: