2015-08-20 35 views
1

我有一個正規引導超大屏幕內的DIV ...垂直對齊DIV來引導超大屏幕的底部在IE9無法使用Flex

<div class="jumbotron vertical-align"> 
    <div class="container"> 
     Content here 
    </div> 
</div> 

這我對準使用這個底部...

.vertical-align 
{ 
    display:0; 
    display:flex; 
    -webkit-align-items:flex-end; 
    align-items:flex-end; 
} 

這很適合在任何地方使用,但在IE9中DIV與頂部對齊時失敗。我知道Flex在IE9中不起作用,但需要另一個快速解決方案。

任何方式我可以做到這一點不同的方式來讓它跨瀏覽器工作?

回答

0

看看我剛​​才幾分鐘前發佈的這個問題的答案。 Flex不上IE 9運行

How can I align 2 or more "row" divs to the bottom of a div, without using any kind of "absolute" positioning? Needs IE9+ support

編輯:萬一鏈接更改鏈接的內容。

如果你可以使用jQuery,那麼這個解決方案的工作原理。這裏是一個小提琴:https://jsfiddle.net/o47xeze7/3/

HTML

<div class="parent"> 
    <div class="bottom"> 
     <div class="child">abcdfg</div> 
     <div class="child">abcdfg</div> 
    </div> 
</div> 

CSS

.parent { 
    width: 100%; 
    height: 20rem; 
    border: 1px solid black; 
    display: block; 
} 

.child { 
    border: 1px solid red; 
    display: block; 
} 

.bottom { 
    display: block; 
    position: relative; 
} 

jQuery的

$(function() { 
    var parentHeight = $(".parent").height(); 
    var bottomHeight = $(".bottom").height(); 
    var difference = parentHeight - bottomHeight; 

    $(".bottom").css("margin-top", difference); 
}); 
+0

雖然此鏈接可以回答這個問題,最好是在這裏有答案的主要部件,並提供鏈接以供參考。如果鏈接頁面更改,則僅鏈接答案可能會失效。 –

+0

@JohnBupit謝謝,我已經用其他答案的內容更新了我的帖子。 – 9997

2

您可以使用CSS表:

.vertical-align { 
 
    display: table; 
 
    height: 100px; 
 
    border: 1px solid; 
 
} 
 
.container { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}
<div class="jumbotron vertical-align"> 
 
    <div class="container"> 
 
    Content here 
 
    </div> 
 
</div>