頂部div出現在底部和底部到頂部

我的HTML結構先顯示一個段落，然後顯示底部的圖形。使用CSS，我想在頂部顯示圖形並在底部顯示段落。該段將是動態的，因此高度不固定。我無法弄清楚如何解決這個問題。頂部div出現在底部和底部到頂部

這是我的代碼：

.centerDiv { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 
.topDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    vertical-align: top; 
 
} 
 

 
.bottomDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
    vertical-align: top; 
 
}

<div class="centerDiv"> 
 
    <div> 
 
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique 
 
     nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div> 
 
    <div class="bottomDiv">Graphic</div> 
 
    </div> 
 
</div>

來源

2017-04-23 Steven

您剛纔的支持想要改變段落和圖形的位置，或者應該將圖形固定在頁面頂部段落固定在底部？ –

圖形是否有固定的高度？ – Bram

如果圖形有一個固定的高度就可以實現，使用定位

參見下文

.centerDiv { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/* added code */ 
 
.centerDiv>div { 
 
    position: relative; 
 
    padding-top: 100px; /* padding value equals to bottomDiv's height*/ 
 
} 
 
/*---------------*/ 
 

 
.topDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
} 
 

 
.bottomDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
    
 
    /* added code */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    /*---------*/ 
 
}

<div class="centerDiv"> 
 
    <div> 
 
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique 
 
     nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div> 
 
    <div class="bottomDiv">Graphic</div> 
 
    </div> 
 
</div>

代碼

或者你可以使用flex-direction: column-reverse;其反轉的div孩子

的順序，但這種可能沒有在一些瀏覽器

.centerDiv { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 

 
.centerDiv>div { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
} 
 

 
.topDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
} 
 

 
.bottomDiv { 
 
    display: inline-block; 
 
    width: 460px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
}

<div class="centerDiv"> 
 
    <div> 
 
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique 
 
     nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div> 
 
    <div class="bottomDiv">Graphic</div> 
 
    </div> 
 
</div>

來源

2017-04-23 09:07:23 Chiller

頂部div出現在底部和底部到頂部

回答

相關問題