为什么一个div的样式会影响另一个？

Question

“Mid”和“right”应该仍然在导航栏下面，但是当我垂直对齐我的“左”文本时，“mid”和“right”与它垂直对齐。

我需要更改为只在图像内部“左上”和“左下”垂直对齐，同时将“中”和“右”保持在导航栏正下方的默认位置？

/* Main Content Seperation */

div.contentContainer {
  margin: 0 auto;
}
div.left,
div.right {
  width: 20%;
  display: inline-block;
}
div.mid {
  width: 50%;
  display: inline-block;
  border: 1px solid black;
}
/* Left Content */

div.left {
  height: 740px;
  color: white;
}
div.upperLeft,
div.lowerLeft {
  border: 1px solid white;
}
div.upperLeft {
  height: 366px;
  background-image: url("mainimg_macbook.png");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
div.lowerLeft {
  height: 366px;
  background-image: url("mainimg_typing.png");
  background-repeat: no-repeat;
}

<div class="contentContainer">
  <div class="left">
    <div class="upperLeft">
      <p class="left">Upper Left</p>
    </div>
    <div class="lowerLeft">
      <p class="left">Lower Left</p>
    </div>
  </div>

  <div class="mid">
    <p>Mid</p>
  </div>

  <div class="right">
    <p>Right</p>
  </div>
</div>

Answer 1

JSFiddle

另一种方法是只悬浮元素。

<强> CSS

/* Main Content Seperation */

div.contentContainer {
  margin: 0 auto;
}
div.left,
div.right {
  width: 20%;
  float: left;
}
div.mid {
  width: 50%;
  display: inline-block;
  border: 1px solid black;
  float: left; // Floats Left
}
/* Left Content */

div.left {
  height: 740px;
  color: white;
  clear:none;
}
div.upperLeft,
div.lowerLeft {
  border: 1px solid white;
}
div.upperLeft {
  height: 366px;
  background: purple;
  background-repeat: no-repeat;
  line-height: 366px;// Align Text to Center of Div
  text-align: center; // Center Text
}
div.lowerLeft {
  height: 366px;
  background-color: red;
  background-repeat: no-repeat;
  vertical-align: middle;
  text-align: center; // Center Text
  line-height: 366px; // Align Text to Center of Div
}