爲什麼一個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 
}