將div元素與容器底部對齊

Question

我正在嘗試將一個容器內的三個div之一對齊，但我遇到了一些問題。

正如你所看到的，如果我嘗試在bottom-aligned div上使用絕對定位，那麼高度就成了一個問題。

我可以設置特定的高度，但cta-item divs中的內容可能會從非常小到非常大。

我正在嘗試爲所有用例創建解決方案。

我知道我可以使用jQuery來獲取最大的cta-item div的高度並進行相應的調整，但我試圖儘可能避免使用jQuery/JS。

我用我目前擁有的東西創建了一個小提琴here。

預先感謝您！

.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>

Answer 1

添加到您的代碼：

.cta-item { 
    display: flex; 
    flex-direction: column; 
} 

.bottom-aligned { 
    margin-top: auto; 
} 

revised fiddle

更多細節在這裏：Methods for Aligning Flex Items