根據內容在不同列的相同高度製作兩個div

Question

我有兩個Foundation列，其中有兩個div，每個div都有文本。兩種文本不具有相同的長度，這也就是爲什麼，在申報單並不總是相同的高度（取決於媒體查詢）

<div class="row"> 
    <div class="medium-10 columns"> 
    <p>Some text here</p> 
    </div> 

    <div class="medium-10 columns> 
    <p>A lot more text in here</p> 
    </div> 
</div> 

我想要做的是，這兩個div的始終是相同的高度（根據其中大部分文字的div）。此外，我想將文本居中放置在文本較少的div內。我一直用Flexbox來做這件事。但由於基礎網格佈局而崩潰。任何想法？

僅限CSS！

Answer 1

從基礎DOC：

您可以使用一些數據屬性的高度相等的容器。 將數據均衡器屬性應用於父容器。然後將 數據均衡器監視屬性應用於您希望具有相同高度的每個元素 。數據均衡器監視屬性的高度將爲 等於最高元素的高度。

<div class="row" data-equalizer> 
    <div class="large-6 columns panel" data-equalizer-watch> 
    ... 
    </div> 
    <div class="large-6 columns panel" data-equalizer-watch> 
    ... 
    </div> 
</div> 

Foundation Doc

Answer 2

您可以隨時使用display：您.row類表，並顯示：在你列的表芯。無論內容如何，​​表格單元格都會強制兩個div的高度相同。