부트 스트랩 3 개 응답 사각형 컬럼

Question

I이 배치를 달성하기 위해 노력하고있어

왼쪽은 33 %이고, 오른쪽은 66 %, 좌측 각 버튼 그의 폭의 50 %의 높이를 갖는다 , 오른쪽에있는 큰 사각형은 그의 폭 에서 75 %의 높이를 가지고 있으며, 파란색 사각형 내가이 방법을 사용하고 있습니다 div의 높이 달성하지 않으려면 25 %

이다 상관없이 내가 무슨 짓을했는지 http://codeitdown.com/css-square-rectangle/

을 , 왼쪽 버튼은 오른쪽이 div의

http://www.bootply.com/Fc66vnIhOo

Answer 1

당신이 this을 달성하고자하는 경우와 같은 높이 결코 당신이 자바 스크립트를 싫어하지 않아, 당신은 단순히이 작업을 수행 할 수 있습니다

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를로드하는 것을 잊지 마세요!