html 코드에서 순서를 변경하지 않고 div 요소를 정렬하는 방법은 무엇입니까?

Question

I가 HTML 코드에서 자신의 순서를 변경하지 않고 이미지에 표시된 DIV 요소를 배치하는 방법 다음 HTML 코드

<div class="holder"> 
    <div class="left"> DIV1 </div> 

    <div class="right"> DIV2 </div> 

    <div class="right"> DIV3 </div> 

    <div class="right"> DIV4 </div> 

    <div class="left"> DIV5 </div> 

    <div class="right"> DIV6 </div> 
</div> 

?

Answer 1

간단한 CSS를 사용하여 div의 위치를 ​​조작 할 수 있습니다. http://jsfiddle.net/7uwzccs1/

HTML

<div class="holder"> 
<div class="left1"> DIV1 </div> 

<div class="right"> DIV2 </div> 

<div class="right"> DIV3 </div> 

<div class="right"> DIV4 </div> 

<div class="left2"> DIV5 </div> 

<div class="right"> DIV6 </div> 
</div> 

CSS

.left1{ 
    position: absolute; 
} 

.left2{ 
    position: absolute; 
    left: 8px; 
    top: 25px; 
} 

.right{ 
    position: relative; 
    left: 100px; 
} 

Answer 2

나는이 최선의 방법이 아닌 다른 사람이 어떤 지점에서 코드를 편집 될 경우 혼란 스러울 수도 danielnixon에 동의합니다. 나는 좀 더 직관적으로 만들기 위해 .left 및 됐지 클래스하여 HTML을 정렬 좋을 것 :

<div class="holder"> 
<div class="left"> DIV1 </div> 

<div class="left"> DIV5 </div> 

<div class="right"> DIV2 </div> 

<div class="right"> DIV3 </div> 

<div class="right"> DIV4 </div> 

<div class="right"> DIV6 </div> 

난 당신이 div의 플로트하는 것입니다 달성하고자하는 무엇을 가장 짧은 경로를 생각한다 와 CSS 그래서 같은 :

.left { 
float: left; 
clear: left; 
} 

.right { 
float: right; 
clear: right; 
} 

DEMO : 당신이 함께 가까이 된 div를 이동하려면 http://jsfiddle.net/xzgs61uw/2/

또한, 단순히 CSS A의 .holder 만들 너비를 제한하십시오. 예 :

.holder { 
width: 200px; 
} 

희망이 있습니다.

Answer 3

를 사용하여 명확하고 각 클래스에 대한 CSS에서 속성을 떠 예를 들면 다음과 같습니다. JS Fiddle

.left{ 
    float: left; 
    clear: left; 
} 
.right{ 
    float: right; 
    clear: right; 
}