引导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的！