Question

以下是JSfiddle中的当前代码在中间有4个Div的并排。

我想要做的是让两个孩子的div与父母一样高，并显示白色背景。

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

我一直在搞乱不同的显示方法（桌子，弹性，网格），但尚未找到合适的组合方式。

这是我的HTML

let hmac = crypto.createHmac('sha256', SECRET);
hmac.update(payload);
let signature = toUrlSafe(hmac.digest('base64'));

这是我试图开始工作的CSS部分

 <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>

Answer 1

将中间行更改为表格布局。

.dialog {
  display: table;
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.left, .right {
 background: #fff;
 display: table-cell;
 width: 50%;
}

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-image: url("../img/bg.jpg");
  background-repeat: repeat;
}

main {
  display: block;
  position: relative;
  padding-top: 10px;
  width: 950px;
  margin: 0 auto;;
}

.full {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  display: inline-block;
  width: 100%;
}

.dialog {
  display: table;
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.left, .right {
  background: #fff;
  display: table-cell;
  width: 50%;
}

.bbar {
  width: 100%;
  background: linear-gradient(#4B4A5F, #6381D9);
}

.gbar {
  width: 100%;
  background: linear-gradient(#589288, #576A63);
}

.obar {
  width: 100%;
  background: linear-gradient(#C42D25, #EC694A);
}

.ybar {
  width: 100%;
  background: linear-gradient(#F85A4D, #EAC746);
}

.st {
  display: inline-block;
  font-size: 24px;
  color: #fff;
  padding: 6px;
}

.hb {
  display: inline-block;
  padding: 8px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}

.txt {
  padding: 8px;
  color: #000;
  background-color: #fff;
}

＆＃13;

 <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>
  </main>

＆＃13;

https://jsfiddle.net/afelixj/o3cm8jed/3/

Answer 2

您可以使用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/

使DIV高度相同而不是相互覆盖

2 个答案: