html - 获得相同高度的DIV并且不相互覆盖

Question

这是我在 JSfiddle 中的当前代码 中间有4个并排的两个Div。

我想要做的是让两个子 div 与父 div 高度相同并显示白色背景。

现在底部的 DIV 位于中间的另外两个 DIV 之上，背景不是白色。

我一直在搞乱不同的显示方法(表格、 flex 、网格)，但还没有找到有效的组合。

这是我的HTML

 <main>
<div class="full">
  <div class="gbar"><span class="hb">Testing text</span>
  </div>
  <div class="txt">
  <p>Testing text</p>
  </div>
</div>
<div class="dialog">
  <div class="left">
    <div class="obar"><span class="hb">Testing text</span>
    </div>
    <div class="txt">
      <p>Testing text</p>
      <p>Testing text</p>
      <p>Testing text</p>
      <p>Testing text</p>
    </div>
  </div>
  <div class="right">
    <div class="bbar"><span class="hb">Testing text</span>
    </div>
    <div class="txt">
      <p>Testing text</p>
      <p>Testing text</p>
    </div>
  </div>
</div>
<div class="full">
  <div class="ybar"><span class="hb">Testing text</span>
  </div>
  <div class="txt">
    <p>Testing text</p>
  </div>
</div>

这是我要开始工作的 CSS 部分

.full {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  background-color: #fff;
}

.dialog {
  display: block;
  position: relative;
  margin-top: 10px;
}

.left {
  display: inline-block;
  position: absolute;
  width: 49%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
}

.right { 
  display: inline-block;
  position: absolute;
  width: 49%;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
}

Answer 1

你可以使用flex

    .dialog {
      margin-top: 10px;
      width: 100%;
      display: flex;
    }

    .left {
      flex: 1;
      background-color: white;
    }

    .right{
      flex: 1;
      background-color: white;
    }

https://jsfiddle.net/rnk44rtn/2/