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

Question

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

我需要更改哪些图像内部只有“左上”和“左下”垂直对齐，而将“中”和“右”仍然保留在导航栏正下方的默认位置？

/* 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 
}