CSS 열 - 열보다 많은 요소

Question

2 열로 레이아웃 작업을하고 있습니다. 그러나 필자는 필자의 템플릿이 복잡하고 컬럼 당 하나의 div를 가질 수 없기 때문에 몇 가지 문제가있다.

예를 들어, 내가 좋아하는 일이있을 수 있습니다

<div class="column left"> 
    left column - part 1 
</div> 
<div class="column right"> 
    right column - part 1 
</div> 
<div class="column right"> 
    right column - part 2 
</div> 
<div class="column left"> 
    left column - part 2 
</div> 

을 그리고 내가 뭘하려는 동일한 폭과 그들 사이의 빈 구멍 (수직)하지 않고, 두 개의 열을 만드는 것입니다. 일반적으로,으로 달성하기 위해 문제가되지 않을 것입니다 :

<div class="column left"> 
    left column - part 1 
    left column - part 2 
</div> 
<div class="column right"> 
    right column - part 1 
    right column - part 2 
</div> 

또한, 내 목표는 IE7처럼 죽은 브라우저에서 작동하는 솔루션을하는 것입니다. 그러나 나는 또한 새로운 브라우저에서만 지원되는 솔루션을보고 싶다. 흥미로운 해결책이 될 수도 있기 때문이다. 물론 JS를 통한 솔루션도 있습니다. 한 div에서 모든 .column.left의 요소를 병합하고 .column.right에 대해 동일한 작업을 수행하지만 CSS 솔루션이 더 좋을 것입니다.

감사합니다.

Answer 1

요구 사항이 없으면 요구 사항이 다른 열의 div가 필요합니까? 그렇다면 순수한 CSS로 다른 컬럼의 요소보다 위에있는 요소를 넣을 필요가 없으므로이를 수행 할 수 없습니다. Use CSS to reorder DIVs을 참조하십시오.

그 문제가 아닌 경우, 코드와 사용 다음 CSS에서 오른쪽 열에 div를하기 전에 모든 왼쪽 열 된 div를 작성하려고 :

.left { 
    float: left; 
    width: 100px; 
    clear: left; 
} 

.right { 
    margin-left: 100px; 
} 

그것은 두 개의 열 레이아웃을 생성합니다. 이 방법은 폭이 일정한 열 중 하나 일 때 특히 효과적이지만 100px을 예를 들어 50%으로 변경하여 원하는대로 달성 할 수 있습니다. 여기의 예 : http://jsfiddle.net/uQwUT/.