如何在CSS

Question

適應元素的高度到另一個我有以下的HTML代碼

<div class="row info_container"> 
    <div class="col-md-4 info_box"> 
     <p class="info_text"><img src=""/>Some text</p> 
    </div> 
    <div class="col-md-4 info_box"> 
     <p class="info_text"><img src=""/>Some text</p> 
    </div> 
    <div class="col-md-4 info_box"> 
     <p class="info_text"><img src=""/>Some longer text</p> 
    </div> 
</div> 

當有3個格，每一個包含圖片和一些文字。在其中一個div中，文本更長，所以有兩行文本而不是一個，導致div更高。

有沒有一種方式來告訴所有的div來獲得更大的高度？我試圖尋找谷歌和這裏，但找不到沒有JS答案...

編輯：嘗試下面的CSS：

.info_container { 
    display: flex; 
    align-items: stretch; 
} 

但沒有奏效。也嘗試刪除align-items屬性，而是在.info_box中添加flex-grow：1，但也沒有工作...

編輯2：aaaaand我發現這個錯誤，它是以下代碼行

.info_box{ 
height: 100%; 
} 

這是在我的CSS。所以，我可以確認只需添加顯示器：flex即可工作。

Answer 1

CSS Flex是你的朋友伴侶。只需添加display: flex到這樣的容器：

.info_container { 
    display: flex; 
} 

一切應正好落入地方:)

卡倫Manenez有一個方便的筆，將它解釋上關於Flexbox很好here

Answer 2

嘗試

.info_container { display: flex; align-items: stretch;}