将div元素对齐到容器的底部 [英] Align div element to bottom of container
问题描述
正如你将会看到的,如果我尝试并使用它,绝对定位在底部对齐
div的高度就成了问题。
我可以设置一个特定的高度,但 cta-item
div中的内容可能会从非常小到非常大。
我试图创建所有用例的解决方案。
我知道我可以使用jQuery来获取最大的 cta-item
DIV,并相应地进行调整,但我试图尽可能避免使用jQuery / JS。
我创建了一个这里的小提琴
预先感谢您!
$ b
.dynamic-cta-ctr {display:flex;}。dynamic-cta-ctr .cta-item {flex:1; text-align:center; padding:0 30px;位置:相对; border-right:1px solid#555;}。dynamic-cta-ctr .cta-item:last-child {border-right:none;}。dynamic-cta-ctr .cta-item .bottom-aligned {/ * position :绝对的;底部:0; * /}
< div class =dynamic-cta 〜CTR> < div class =cta-item> < div class =heading-text>< h3>一些内容< / h3>< / div> < div class =cta-field-content>有些内容挂在< / div> < div class =bottom-aligned>< h5>底部对齐的内容< / h5>< / div> < / DIV> < div class =cta-item> < div class =heading-text>< h3>您也可以吃蛋糕,也可以吃!< / h3>< / div> < div class =cta-field-content>有些内容挂在< / div> < div class =bottom-aligned>< h5>底部对齐的内容< / h5>< / div> < / DIV> < div class =cta-item> < div class =heading-text>< h3>如果您说我们有打卡和派< / h3>< / div> < div class =cta-field-content>有些内容挂在< / div> < div class =bottom-aligned>< h5>底部对齐的内容< / h5>< / div> < / div>< / div>
flex-direction:column;
}
.bottom-aligned {
margin-top:auto;
更多细节:调整Flex项目的方法
I am trying to bottom align one of three divs inside a container, but I'm having some issues.
As you will see, if I try and use absolute positioning on the bottom-aligned
div the height becomes a problem.
I can set a specific height, but the content within the cta-item
divs could vary from very small to very large.
I'm trying to create a solution for all use cases.
I know I can use jQuery to get the height of the largest cta-item
div and adjust accordingly, but I'm trying to avoid using jQuery/JS for this whenever possible.
I created a fiddle here with what I currently have.
Thank you in advance!
.dynamic-cta-ctr {
display: flex;
}
.dynamic-cta-ctr .cta-item {
flex: 1;
text-align: center;
padding: 0 30px;
position: relative;
border-right: 1px solid #555;
}
.dynamic-cta-ctr .cta-item:last-child {
border-right: none;
}
.dynamic-cta-ctr .cta-item .bottom-aligned {
/* position: absolute;
bottom: 0; */
}
<div class="dynamic-cta-ctr">
<div class="cta-item">
<div class="heading-text"><h3>Some content</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
<div class="cta-item">
<div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
<div class="cta-item">
<div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
</div>
Add this to your code:
.cta-item {
display: flex;
flex-direction: column;
}
.bottom-aligned {
margin-top: auto;
}
More details here: Methods for Aligning Flex Items
这篇关于将div元素对齐到容器的底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!