왜 내 콘텐츠 사이에 큰 차이가 있습니까?

Question

나는이 6 개의 열이 왼쪽으로 떠서 서로 나란히 나타나므로 중간 콘텐츠의 높이를 높이면 데모를 볼 수 있습니다. 6도 아래로 밀어하지만 난 다른 높이를 가질 수 있습니다 같은 마진을

CSS

.left-side-bar{ 
    clear: both; 
    height: 200px; 
    width: 32.26%; 
    background-color: gray; 
    text-align: center; 
    float: left; 
    margin-top: 1%; 
} 

.middle-side-bar{ 
    height: 340px; 
    width: 32.26%; 
    background-color: blue; 
    text-align: center; 
    float: left; 
    margin: 1% 0 1% 1.6%; 
} 

.right-side-bar{ 
    height: 200px; 
    width: 32.26%; 
    background-color: yellow; 
    text-align: center; 
    float: left;  
    margin: 1% 0 1% 1.6%; 
} 

이러한 내용을 유지하려면. 이것은 단지 질문에 대한 있었고, 난 6 개 이상의 열

당신은 컨테이너에 세 가지 다른 열을 내리는 데 필요한 enter link description here

Answer 1

올바른 바이올린이있을 수 있습니다. 당신은 수평선으로 생각하고 있습니다. 그것은 기본적이지만 수직적으로 생각해야합니다. 기본적으로 3 개의 열이 있고 그 다음에 다른 높이의 div가옵니다.

<div class="container"> 
    <div class="left-side-bar red"> 
     Column 1 
    </div> 

    <div class='middle-side-bar red'> 
     Column 2 
    </div> 

    <div class='right-side-bar red'> 
     Column 3 
    </div> 
</div> 

예 : this fiddle을 확인하십시오.