Поле div с блоком div при размещении текста выталкивает все поля - PullRequest
Новая
       2

Поле div с блоком div при размещении текста выталкивает все поля

0 голосов
/ 08 июня 2019

У меня есть страница с использованием контейнера начальной загрузки и строк, которая в большинстве случаев работает нормально. некоторые столбцы имеют круги CSS для использования в качестве индикаторов.

У меня проблема с последним столбцом строки, который, когда я добавляю блоки div в созданную мной панель div, а затем добавляю текст в div, он выталкивает все остальные столбцы, чтобы увеличить их размеры.

Без текста и только с divs все в порядке. Я не могу найти способ остановить это

Это снимок экрана без добавления текста, поскольку вы можете видеть, что датчик выглядит нормально without Text

with text

Это код 

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

1 Ответ

0 голосов
/ 08 июня 2019

Получилось, убрав 85% поля из класса панели.Который работает в этой части, но означает, что мне нужно будет создать новый класс для остальной части страницы, которая использовала этот класс 

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