Question

我几个小时都在苦苦挣扎，无法找到解决方案。我做了一个简单的布局，显示两对仪表+温度计可视化，以显示ESP8266上传的温度。基本布局是：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>The title</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="container_main">
    <div id="heading"><h1>The title</h1></div>
    <div class="graph">
      <div id="container">
        <div id="inner">
          <div id="gauge_div"></div>
          <div class="below_gauge">Text #1</div>
          <div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div>
        </div>
        <div id="thermometer">
          <canvas id="termometar_cnv" width="160" height="600"></canvas>
        </div>
        <div id="inner2">
          <div id="gauge2_div"></div>
          <div class="below_gauge">Text #2</div>
        </div>
        <div id="thermometer2">
          <canvas id="termometar2_cnv" width="160" height="600"></canvas>
        </div>
      </div>
      <div id="below">Description.
      </div>
    </div>
  </div>
</body>
</html>

body {
    background-color: #ddd;
}
h1 {
    color: #FFFFFF;
    background-color: #0000FF;
    padding: 5px;
}
#container {
    height: 100%;
    width: 100%;
    display: table;
}
#inner {
    vertical-align: middle;
    display: table-cell;
}
#inner2 {
    vertical-align: middle;
    display: table-cell;
}
#gauge_div {
    width: 240px;
    height: 240px;
    margin: 0 auto;
    background-color: green;
}
#gauge2_div {
    width: 240px;
    height: 240px;
    margin: 0 auto;
    background-color: green;
}
#heading {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: blue;
}
#below {
    margin: 0 20px;
    text-align: center;
    color: blue;
}
.graph {
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    color: blue;
    border: thin solid #00F;
}
#container_main {
    padding-right: 100px;
    padding-left: 100px;
}
#thermometer {
    margin: 0 auto;
    padding: 10px 0px 10px 0;
    background-color: gray;
}
#thermometer2 {
    margin: 0 auto;
    padding: 10px 20px 10px 0;
    background-color: gray;
}
.below_gauge {
    font-weight: bold;
    color: blue;
}
.below_gauge2 {
    width: 240px;
    margin: 0 auto;
    color: blue;
}

从HTML中删除<div class="below_gauge2">时，布局正是我希望的样子。然而，在添加DIV之后，绿色div向上移动，因此它不再与右边的第二个绿色div垂直对齐。

可以做什么，所以<div class="below_gauge2">会显示在左侧绿色DIV下方，但是这样绿色DIV会在添加<div class="below_gauge2">之前保持原样？

Answer 1

检查此fiddle

int newCarId = abs(carId);

如何在不破坏垂直对齐的情况下定位DIV？

1 个答案: