使这种布局正常工作的正确方法是什么？

Question

似乎是一项简单的任务，结果证明是一个很大的问题。我试图找到一种方法同时保持绿色DIV的垂直对齐和防止绝对定位的DIV与后面的内容重叠。

由于我不得不使用绝对定位来破坏对齐，我现在正在寻找解决另一个问题的解决方案。

以下是代码：

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;
    position: relative;
}
#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;
    clear: both;
}
.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_container {
    position: absolute;
    left: 0;
    right: 0;
}
.below_gauge2 {
    width: 240px;
    color: blue;
    position: relative;
    margin: auto;
}
.below_gauge3 {
    width: 240px;
    color: blue;
    position: relative;
    margin: auto;
    border: thin solid #F00;
}

<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_container">
          <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. That has been solved.</div>
          <div class="below_gauge3">I do not want the contents of this DIV to overlap the contents below. This DIV can contain any ammount of text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</div>
        </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">Is there a way to make the DIV with the red border to push down this DIV so the DIV with the red border would not overlap what is below?
    </div>
  </div>
</div>

当我遇到如何对齐两个绿色DIV时，我根据the answer（我接受了）my question创建了此代码。可以看出解决方案是使用绝对定位但现在导致了一个问题，因为每个绝对定位元素都是根据从流程中删除的CSS规范。

Answer 1

尝试左边距和右边距。