使用SUSY佈局的動態高度行

Question

我們如何才能讓SUSY中的列以流暢的方式等於行高？

在這種情況下，行高是由高度最高的內容決定的。

找不到答案，對絕大多數SUSY用戶都是有幫助的。所以謝謝你的貢獻！

超對稱設置：

@import "susy"; 

$susy: (
    columns: 12, 
    gutters: 1/6, 
    math: fluid, 
    output: float, 
); 

CSS：

main-container { 
    @include container (80%); 
} 

.block { 
    background: #e1e1e1; 
} 

.row { 
    display: inline-block; 
} 

.photo { 
    height:100%; 
} 

#block1-1 { 
    @include span(4); 
} 

#block1-2 { 
    display: table; 
    @include span(8 at 5); 
} 

#block2-1 { 
    @include span(4); 
} 

#block2-2 { 
    @include span(4 at 5); 
} 

#bloc2-3 { 
    @include span(4 at 9); 
} 

HTML：

<div class="main-container"> 

    <div class="row"> 
     <div id="block1-1" class="block">content</div> 
     <div id="block1-2" class="photo">content</div> 
    </div> 

    <div class="row"> 
     <div id="block2-1" class="photo">content</div> 
     <div id="block2-2" class="block">content</div> 
     <div id="block2-3" class="block">content</div> 
    </div> 
</div> 

Answer 1

CSS沒有任何跨瀏覽器的方式做等高列 - 和除了CSS之外，Susy不能做任何事情。有any number of work-arounds，但最好的是flexbox（如果瀏覽器支持足夠你的網站）。與Flexbox的使用與Susy，做這樣的事情：

.row { 
    align-items: stretch; 
    display: flex; 
} 

#block1-1 { 
    width: span(4); 
} 

您可能能夠使用display: table;和display: table-cell做類似的事情。無論哪種情況，您都希望放棄Susy span mixin，並改用span函數。它使用相同的語法。