引導3個響應矩形柱上

Question

我試圖完成這個佈局：

左側是33％和右邊是66％， 左側每個按鈕具有從他的寬度50％的高度， 右側的大矩形從他寬度 75％的高度，藍色矩形是25％

實現我使用這個方法的div高度：http://codeitdown.com/css-square-rectangle/

無論我做了什麼，左邊按鈕是絕不相同的高度，右兩個div

http://www.bootply.com/Fc66vnIhOo

Answer 1

如果你想實現this，你不恨JavaScript，您可以簡單地這樣做：

HTML

<div class="col-xs-4"> 
    <div class="color1"></div> 
    <div class="color2"></div> 
    <div class="color3"></div> 
    <div class="color4"></div> 
</div> 

<div class="col-xs-8"> 
    <div class="color5"></div> 
    <div class="color6"></div> 
</div> 

CSS

.color1 {background: #01FF21;} 
.color2 {background: #FF00DC;} 
.color3 {background: #01FFFF;} 
.color4 {background: #FFD800;} 
.color5 {background: #01FF90;} 
.color6 {background: #0094FF;} 

.col-xs-4 {padding: 0;} 
.col-xs-8 {padding: 0;} 

JAVASCRIPT

$(document).ready(function() { 
    resizeBlocks(); 

    $(window).resize(function() { 
     resizeBlocks(); 
    }) 
}) 

function resizeBlocks(){ 
    $('.color1').height($('.color1').width()/2); 
    $('.color2').height($('.color2').width()/2); 
    $('.color3').height($('.color3').width()/2); 
    $('.color4').height($('.color4').width()/2); 

    $('.color5').height(3*$('.color1').width()/2); 
    $('.color6').height($('.color1').width()/2); 
} 

而且不要忘了加載jQuery的！