如何讓他的內容完美的同意卡片

Question

我有這個「卡片」，當他們有相同的內容完美的作品。但是如果我添加不同長度的內容，它們都會變得混亂。解決這個問題最好的辦法是什麼？

我試過對黑暗部分使用固定高度，但我不能讓它工作（灰色部分已經有固定的高度），因爲即使現在這些卡片具有相同的高度，某些原因更高。

這是它的外觀，如果我添加大量的內容其中之一：

，如果我試圖把一個固定的高度，以較深的部分會發生什麼：

這是我的HTML和CSS沒有固定的高度： （我不包括CSS的按鈕，h4等）

.bDivision, 
 
.bNet, 
 
.bPlacements, 
 
.bGames-Wins { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    margin-top: 2em; 
 
    margin-right: 1em; 
 
    width: 300px; 
 
    display: inline-block; 
 
} 
 
.container-boosts { 
 
    max-width: 1300px; 
 
} 
 
.fBoosts .image { 
 
    height: 400px; 
 
    background-color: #595959; 
 
    border-bottom: 2px solid #28F0FF; 
 
} 
 
.fBoosts .content { 
 
    background-color: #1C1C1C; 
 
    padding: 1em; 
 
}

<div class="row container-boosts"> 
 
    <div class="bNet"> 
 
    <div class="image"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Net Wins Boost</h4> 
 
     <p>Some content some content some content some content</p> 
 
     <a class="btn-choose">Purchase</a> 
 
    </div> 
 
    </div> 
 
    <div class="bDivision"> 
 
    <div class="image"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Division Boost</h4> 
 
     <p>Some content some content some content some content</p> 
 
     <a class="btn-choose">Purchase</a> 
 
    </div> 
 
    </div> 
 
    <div class="bPlacements"> 
 
    <div class="image"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Placements Boost</h4> 
 
     <p>Some content some content some content some content Some content some content some content some content</p> 
 
     <a class="btn-choose">Purchase</a> 
 
    </div> 
 
    </div> 
 
    <div class="bGames-Wins"> 
 
    <div class="image"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Normal Games Boost</h4> 
 
     <p>Some content some content some content some content</p> 
 
     <a class="btn-choose">Purchase</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

更改爲

.bDivision, .bNet, .bPlacements, .bGames-Wins { 
     margin: 0; 
     padding: 0; 
     margin-top: 2em; 
     margin-right: 1em; 
     width: 300px; 
     display: inline-block; 
     float: left; 
    } 

我能在上面的4個格與ID = 「內容」對齊。

Answer 2

是的，這就是你需要的...... A float : left ; 在你的4主要divs seletor。