顶部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出现在底部和底部到顶部

回答

相关问题