如何設置父母身高的100％（基礎6）？

彼此旁邊有三個33％的div。第一個是空白div，第二個div包含四個圖像，第三個空白div。如何設置父母身高的100％（基礎6）？

我如何迴應地保持這3個塊的高度相同？我使用基金會6

.block { 
 
    background: grey; 
 
} 
 

 
.block, .imgBlock { 
 
    height: 200px; 
 
} 
 

 
.imgBlock .row .column{ 
 
    padding: 0; 
 
}

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script> 
 

 
<div class="row small-up-3"> 
 
    <div class="column block"> 
 
    </div> 
 
    <div class="column imgBlock"> 
 
    <div class="row small-up-2"> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150"/> 
 
     </div> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150"/> 
 
     </div> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150"/> 
 
     </div> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150"/> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="column block"> 
 
    </div> 
 
    
 
</div>

來源

2016-11-10 Calisto

你看的[均衡器功能（http://foundation.zurb.com/sites/ docs/v/5.5.3/components/equalizer.html）在Foundation 6中？ – hungerstar

用粉底均衡器JS。下面是使用你的代碼基礎均衡器：

代碼：

$(document).foundation();

.block { 
 
    background: grey; 
 
} 
 
.block, 
 
.imgBlock { 
 
    height: 200px; 
 
} 
 
.imgBlock .row .column { 
 
    padding: 0; 
 
}

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.equalizer.js"></script> 
 
<div class="row small-up-3" data-equalizer> 
 
    <div class="column block" data-equalizer-watch> 
 
    </div> 
 
    <div class="column imgBlock" data-equalizer-watch> 
 
    <div class="row small-up-2"> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150" /> 
 
     </div> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150" /> 
 
     </div> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150" /> 
 
     </div> 
 
     <div class="column"> 
 
     <img src="http://placekitten.com/200/150" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="column block" data-equalizer-watch> 
 
    </div> 
 

 
</div>

來源

2016-11-10 14:57:31

不錯！謝謝。 – Calisto

如何設置父母身高的100％（基礎6）？

回答

相關問題