2016-11-07 148 views
0

「中」和「右」應該仍然在導航欄下方,但是當我垂直對齊我的「左」文本時,「中」和「右」與它垂直對齊。爲什麼一個div的樣式會影響另一個div?

我需要更改哪些圖像內部只有「左上」和「左下」垂直對齊,而將「中」和「右」仍然保留在導航欄正下方的默認位置?

enter image description here

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

回答

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 
} 
+0

是我沒有關於奇蹟,所以我試了一下,它的工作:提高「中等」和「右」重回巔峯。但它會導致另一個問題,將我的整個內容向左移動,因此它不再水平地位於屏幕中間 – oneman

+1

您能提供一個指向該網站的鏈接嗎?我想幫你解決這個問題。 – ARLCode

+0

好一會兒,她就把它上傳到服務器。 – oneman

相關問題