波本邦整潔 - 如何做自動列？

Question

我建設有波旁整潔一個網站，我需要這樣的安排列：

如何編寫代碼的任何想法？

我已經試過

.column { 
    @include span-columns(1); 
    @include omega(2n) 
} 

但所有列具有相同的高度。我需要不同的高度。

預先感謝您。

Answer 1

爲了得到這個：

你的HTML需要查看關於這樣的：

<div class = 'content'> 
    <div class = 'short-column' id ='red'> 
    </div> 

    <div class = 'tall-column' id ='yellow'> 
    </div> 
</div> 

<div class = 'content'> 
    <div class = 'tall-column' id ='green' > 
    </div> 

    <div class = 'short-column' id ='blue'> 
    </div> 
</div> 

然後你SCSS需要看起來像這樣：

.content { 
    @include outer-container; 
    height: 20em; 
    display: inline-block; 
    width: 90px; 
} 

.tall-column { 
    @include span-columns(1); 
    height: 80%; 
    width: 100%; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

.short-column { 
    @include span-columns(1); 
    height: 20%; 
    width: 100%; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

使外部內容div顯示內聯塊將堆疊在頂部的列彼此都是你想要他們的方式。爲content div設置一個特定的高度（在這種情況下爲20em），然後將短列div和高列div的高度設置爲100％（本例中爲80％+ 20％= 20％）， 。