Foundation5彼此對齊的網格

Question

我一直在處理一個問題的方式太長，並沒有找到任何適當的解決方案。我目前正在使用foundation5框架上的網格產品展示，並且無法找到適當的jscript或css代碼來相互調整我的產品。 這是它現在的樣子：

我需要這個樣子ATLEAST：

我需要以下更大的產品的窗口，以填補上述較小的窗口空白處。 希望有人能夠幫助，謝謝！

Answer 1

如果你知道divs的高度，這很容易，只需將position: relative添加到更大的div並將其上移。

如果你不這樣做，它非常相似，但你必須設置div的高度和較大的JavaScript的偏移量。

HTML

<div class="row"> 
    <div class="small-4 column"> 
    <div class="inner"></div> 
    </div> 
    <div class="small-4 column"> 
    <div class="inner"></div> 
    </div> 
    <div class="small-4 column"> 
    <div class="inner small"></div> 
    </div> 
</div> 
<div class="row"> 
    <div class="small-4 column"> 
    <div class="inner"></div> 
    </div> 
    <div class="small-4 column"> 
    <div class="inner"></div> 
    </div> 
    <div class="small-4 column"> 
    <div class="inner big"></div> 
    </div> 
</div> 

SASS

$div-height: 200px; 
$big-div-height: 250px; 
$small-div-height: 100px; 

div.inner { 
    height: $div-height; 
    background: #99CCFF; 
    border: 3px solid black; 
    border-radius: 25px; 
} 

div.row { 
    margin-top: 25px; 
} 

div.big { 
    height: $big-div-height; 
    position: relative; 
    top: $div-height - $big-div-height; 
} 

div.small { 
    height: $small-div-height; 
} 

CodePen example

Answer 2

你不能很容易地使基金會電網做到這一點（它提供了一個規則的網格，這就是它是）。但是，您可以在相關的網格列中創建一個div來保存您的內容，並將其定位爲獲得您想要的內容。

給含有格列位置：relative，然後給一個類名像我的類中的新的div，然後執行：現在

.my-class { 
    position : absolute; 
    bottom : 0; 
    left : 0; 
    width : [same percentage width of the screen as your other columns] 
} 

，因爲該單元格的內容將被取出內容流，包含的行將能夠關閉到最大的剩餘網格單元的高度（即那些沒有完全定位的單元格），並且您的內容將位於該行的底部，儘可能擴大。

只要檢查上面較小的單元格的高度，再加上下面的較大單元格的高度，不要超過兩行的高度，否則可能需要額外的東西來滿足這個要求。