如何垂直排列兩個並排的div文本？

Question

我有兩個div並排顯示與flex是相同的高度。我希望裏面的文本顯示對齊，並保持相同，如果父母的div的大小。我無法弄清楚這一點。有任何想法嗎？

要澄清我的困惑的問題，我想這兩個文本始終顯示在同一高度，因此，如果一個人長大，因爲文本後面是更大，另外一個應該移動到匹配的位置。

.row {display: flex;} 
 
.col {flex: 1; 
 
    padding: 1em; 
 
    border: solid;} 
 
p{margin-top:20px;}

<div class="row"> 
 
    <div class="col"> 
 
    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>This stay there</h5> 
 
    <p>To be moved</p> 
 
    </div> 
 
    <div class="col"> 
 
    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.<br>This stay there</h5> 
 
    <p>At the same position of this one</p> 
 
    </div> 
 
</div>

Answer 1

如何使用表格的佈局來實現這一目標？

在表格佈局，您可以使用vertical-align有其含有細胞的中間的內容顯示：

.row { 
 
    display: table; 
 
    width: 100%; 
 
    border: 2px solid #000; 
 
} 
 
.col { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 50%; 
 
    padding: 1em; 
 
    border: 2px solid #000; 
 
} 
 
p{ 
 
    margin-top:20px; 
 
}

<div class="row"> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    <p>To be moved</p> 
 
    </div> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. 
 
    <p>At the same position of this one</p> 
 
    </div> 
 
</div>

Answer 2

可以覆瓦狀排列Flexbox的

編輯 您可以通過justify-content設置列Flexbox內的對齊方式，因爲不太清楚您的內容期望的那樣，你可以測試3個alignements在片段下方

* body * { 
 
    margin: 0; 
 
} 
 
.row { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex: 1; 
 
    padding: 1em; 
 
    border: solid; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 
h5 { 
 
    margin: 0; 
 
    box-shadow: 0 0 0 1px; 
 
} 
 
p { 
 
    margin-top: 20px; 
 
    background: lightgray 
 
} 
 
b { 
 
    text-shadow: 0 0 5px white; 
 
} 
 
#spbet:checked ~ .row .col { 
 
    justify-content: space-between; 
 
} 
 
#ctr:checked ~ .row .col { 
 
    justify-content: center; 
 
} 
 
#btm:checked ~ .row .col { 
 
    justify-content: flex-end; 
 
} 
 
#flex1:checked ~ .row .col { 
 
    justify-content: initial; 
 
} 
 
#flex1:checked ~ .row .col h5 { 
 
    flex: 1; 
 
} 
 
aside { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 
label { 
 
    border: solid; 
 
    margin: 1em; 
 
    padding: 0.5em; 
 
    display: flex; 
 
    flex-flow: column; 
 
    align-items: center; 
 
    background: tomato; 
 
} 
 
input { 
 
    position: absolute; 
 
    left: -9999px; 
 
}

<input type="radio" id="def" name="test"> 
 
<input type="radio" id="spbet" name="test"> 
 
<input type="radio" id="ctr" name="test"> 
 
<input type="radio" id="btm" name="test"> 
 
<input type="radio" id="flex1" name="test"> 
 
<aside> 
 
    <label for="def"><b>space-around</b> 
 
    </label> 
 
    <label for="spbet"><b>space-between</b> 
 
    <br/>align texts from top to bottom</label> 
 
    <label for="ctr"><b>center 
 
    </b>align at center</label> 
 
    <label for="btm"><b>flex-end 
 
    </b>align at bottom</label> 
 
    <label for="flex1"><b>flex 1 
 
    </b>on h5, no justify-content</label> 
 
</aside> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>This stay there</h5> 
 
    <p>To be moved</p> 
 
    </div> 
 
    <div class="col"> 
 
    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.<br>This stay there</h5> 
 
    <p>At the same position of this one</p> 
 
    </div> 
 
</div>

與display:table的方法，以避免彎曲可能是：

.row { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.col { 
 
    border: solid; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    display: table-cell; 
 
    padding: 1em; 
 
    vertical-align: bottom; 
 
} 
 
p {}

<div class="row"> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    <p>To be moved</p> 
 
    </div> 
 
    
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. 
 
    <p>At the same position of this one</p> 
 
    </div> 
 
</div>

Answer 3

這裏是一個當我忘記Flexbox的一些事情時，我參考了一些小指南： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可以使用Flexbox的來acheive你正在嘗試這樣做的盒子中的內容始終垂直居中。

我已經做了jsfiddle，並複製下面的更新CSS：

.row {display: flex;} 
.col {flex: 1; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    flex-direction: column; 
    padding: 1em; 
    border: solid;} 
p{margin-top:20px;}