對齊不同塊的子塊的高度 CSS (flex/grid)

Question

嗨，大家好！ 我有個問題。 我想做和圖片上一樣的標記（CLICK and LOOK!!!） 問題是：同一層卡片的卡片頂部和底部之間的灰線應該對齊。 正如您在第一張卡片的軌道上的圖片中看到的那樣，由於第二張圖片上的文字較大，因此灰線較低。 在第二張卡片的軌道上，灰線更高，因為沒有溢出的文本。 我們可以使用 flex 和 grid。

<div class="cat-cards">
        <div class="cat-card">
            <img src="">
            <div class="short-description">
                short
            </div>
            <div class="long-description">
                long
            </div>
        </div>
        <div class="cat-card"></div>
        <div class="cat-card"></div>
    </div>

我想象的基礎應該是這樣的，但是你可以寫任何使用grid和flex的建議

.cat-cards
{
    display: flex;
}

.cat-card
{
    display: grid;
    grid-template-areas: 'image' 'short'
                     'long' 'long';
   }

.cat-card img
{
    grid-area: image;
}

.cat-card .short-description
{
    grid-area: short;
}

.cat-card .long-description
{
    grid-area: long;
}

Answer 1

如果我正確解釋了您的請求，我相信如果一行的內容高度增加，您希望所有行均等擴展。

例子

 .Grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr } .cat-card { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; grid-gap: 10px; border: 1px solid #ddd; padding: 10px; } .cat-card img { max-width: 200px; } .long-description{ grid-column: 1 / 3; border-top:1px solid #ddd; }

 <div class="Grid"> <div class="cat-card"> <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350"> <div class="short-description"> Title:1 <br/>Title:2 <br/>Title:3 <br/>Title:4 </div> <div class="long-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. </div> </div> <div class="cat-card"> <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350"> <div class="short-description"> Title:1 <br/>Title:2 <br/>Title:3 <br/>Title:4 <br/>Title:5 <br/>Title:6 <br/>Title:7 <br/>Title:8 <br/>Title:9 <br/>Title:10 </div> <div class="long-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. </div> </div> <div class="cat-card"> <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350"> <div class="short-description"> Title:1 <br/>Title:2 <br/>Title:3 <br/>Title:4 </div> <div class="long-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. </div> </div> <div class="cat-card"> <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350"> <div class="short-description"> Title:1 <br/>Title:2 <br/>Title:3 <br/>Title:4 </div> <div class="long-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. </div> </div> </div>

Answer 2

您的父容器應始終包含display:flex; 陳述。 這將確保任何孩子也將得到應用。 在包裝器內對您的孩子使用inline flex 參數，並在兩者上應用flex:50%應該可以解決問題。

您可以在下面找到更多資源，一旦我為您完成工作，我也會編輯代碼。

http://flexboxgrid.com/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/