html - 放置文本时在 div 框中放置的 div 框将所有框推出

问题描述

我有一个使用引导容器和行的页面，其中最好的部分工作正常。一些列有 CSS 圆圈用作仪表。

我对一行的最后一列有问题，当我在面板 div 中添加 div 框，然后将文本添加到 div 时，它会推动所有其他列以增加那里的大小。

没有文本，只有 div 就可以了。我想不出办法来阻止这一切

这是一个没有添加文本的屏幕截图，因为您可以看到仪表看起来不错

这是代码

body {
  height: 100%;
}

#container {
  margin: 1% 1% 1% 0%;
  padding: 5px;
  background: black;
  background-size: cover;
}

.panel {
  margin: 0% 0% 85% 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.5);
  border-radius: 10px;
}

.weatherpanel {
  margin: 0% 0% 0% 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.5);
  border-radius: 10px;
}

.gaugeTitle {
  text-align: center;
  color: white;
  font-size: 3vw;
}

.outerGauge {
  margin: 10% 0% 0% 13%;
  /*top right bottom left */
  border-radius: 50%;
  width: 60%;
  height: 60%;
  background: black;
  box-shadow: 0 0 0 5px red;
  position: absolute;
}

.innerGauge {
  margin: 8% 0% 0% 7%;
  /*top right bottom left */
  border-radius: 50%;
  width: 85%;
  height: 85%;
  background: green;
  box-shadow: 0 0 10px 4px green;
  position: absolute;
}

.gaugeText {
  margin-top: -5%;
  text-align: center;
  color: black;
  font-size: 7vw;
}

.stocks {
  margin: auto;
  height: 10%;
  color: white;
  font-size: 2vw;
  border: solid;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css">
  <title>Dashboard</title>
</head>

<body>
  <div id="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="weatherpanel">
        </div>
      </div>
      <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-4">
            <div class="panel">
              <div class="gaugeTitle" id="wateTitle"></div>
              <div class="outerGauge">
                <div class="innerGauge" id="water">
                  <div class="gaugeText" id="waterGauge">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="panel">
            </div>
          </div>
          <div class="col-sm-4">
            <div class="panel">
              <div class="stocks" id="TCG">text</div>
              <div class="stocks" id="AA">text</div>
              <div class="stocks" id="ABF">text</div>
              <div class="stocks" id="STOB">text</div>
              <div class="stocks" id="MCLS">text</div>
              <div class="stocks" id="BA">text</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="jquery-3.1.0.min.js"></script>
  <script src="newindex.js"></script>
</body>

</html>

下面的链接是一个测试服务器，带有没有文本的测试页面

http://motorhomertestsite.ddns.net/newIndex.html

以及添加了文本的下一个链接

http://motorhomertestsite.ddns.net/withText.html

标签： htmlcssbootstrap-modal

html - 放置文本时在 div 框中放置的 div 框将所有框推出

问题描述

解决方案

推荐阅读