1つのdivのスタイリングが別のdivに影響するのはなぜですか？

Question

"Mid"と "right"はまだNavバーの直下にあると思われますが、垂直に整列した "left"テキスト、 "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 
}