div CSS/자바 스크립트로 스태킹/레이아웃

Question

그래서 4 개의 div가 있습니다. (실제로는 더 많은 것이 있지만 질문이 간단 해집니다.) 두 개의 열로 표시하고 싶습니다. 4 개 구역은 높이가 다릅니다. 결국 실제 div 수는 다양합니다. 나는 스타일이

<div id="1" style="height: 200px" class="inline">some content here</div> 
<div id="2" style="height: 600px" class="inline">some content here</div> 
<div id="3" style="height: 300px" class="inline">some content here</div> 
<div id="4" style="height: 200px" class="inline">some content here</div> 

따라서

.inline { display: inline-block; vertical-align: top; width: 48%;} 

그래서 # 1은 왼쪽으로 갈 것이다 다음 # 2 오른쪽 위대한에 옆에 밀어 것 가지고 있지만 # 3되지 않도록 경우 # 1 아래에 잘 맞게 400 픽셀 위로 밀어 넣습니다. (당연히) ... 그것은 왼쪽에 있지만 위로부터 600px에서 # 2의 바닥을 지 웁니다. 등등 ...

div가 공백으로 밀어 넣을 수있는 방법은 CSS로 가능합니까? 아마도 jquery? 나는 그것을 표시하기 위해 열 div를 작성할 수 있지만 div 수는 지속적으로 변경되고 높이는 내용에 따라 다양하기 때문에 알 수 있습니다. 우리가 그 순서를 정말로 신경 쓰지 않기 때문에 공간을 없애는 것이 좋을 것입니다.

의견이 있으십니까?

Answer 1

순수 CSS에서는 불가능하지만 각 열에 별도의 div가 필요합니다. 다행히 jQuery를 사용하여이를 달성 할 수있다. 이런 식으로 뭔가 트릭 수행해야합니다

$(function() { 
    var odd_divs = $('div.inline:odd'); 
    var even_divs = $('div.inline:even'); 
    var left = $('<div id="left-column" class="column"/>').append(odd_divs); 
    var right = $('<div id="right-column" class="column" />').append(even_divs); 
    $('#somewhere').append(left).append(right); 
}); 

를 그리고이에 CSS를 변경 :

.column { 
    width: 50%; 
    display: inline-block; 
    vertical-align: top; 
} 

편집 브라이언 멕 케나에, 사용이 효과를 달성하기 위해 실제로 가능하다 언급 한 바와 같이

CSS가 떠있다.당신은 너무과 같이 클래스 이름을 추가 할 jQuery를 사용할 수 있습니다

$(function() { 
    $('div.inline:odd').addClass('box-left'); 
    $('div.inline:even').addClass('box-right'); 
}); 

Answer 2

당신은 colunms를 분할하고 모든 두 번째 div를 다른 컨테이너에 할당해야합니다.

<div id="content" style="overflow: hidden;"> 
    <div id="left" style="width: 48%; float: left;"> 
    <!-- This is where every odd numbered div goes --> 
    </div> 
    <div id="left" style="width: auto; margin-left: 50%;"> 
    <!-- This is where every even numbered div goes --> 
    </div> 
</div> 

당신이 곤경에 콘텐츠를 선택하는 데 문제가있는 경우에 대한 루프이 임의 된 div를 만드는이 도움이 될 것입니다

이 코드는 모듈에 relys가

// Render Header 
for(int i = 0; i < list.count(); i++) 
{ 
    if (i % 2 == !) 
    continue; 

    // Render my div inside left colunm 
} 

// Render In-Between 

for(int i = 0; i < list.count(); i++) 
{ 
    if (i % 2 == !) 
    continue; 

    // Render my div inside left colunm 
} 

// Render Footer 

이 목록에서 항목을 선택 올바른 장소에 배치해야합니다. 그러면 내부 div는 바로 colunm 내부에 있어야합니다.

Answer 3

문제를 올바르게 이해하고 있는지 잘 모르겠습니다. 내가 사용하는 HTML이 너무 같았다 http://jsbin.com/emeja

, 당신이 내가 방금 만든이 예제와 유사 할 것 같은데요 :

<div style="height: 200px" class="box-left">some content here</div> 
<div style="height: 600px" class="box-right">some content here</div> 
<div style="height: 300px" class="box-left">some content here</div> 
<div style="height: 200px" class="box-right">some content here</div> 

CSS는 지금과 같다 :

.box-left { float: left; clear: left; width: 48%;} 
.box-right { float: right; clear: right; width: 48%;} 

속임수는 floating 상자입니다. 상자를 지우면 같은 열의 상자 옆에 상자가 나타나지 않습니다.

Answer 4

당신은 IE에서 그것을 할 수 있습니다 (div의이 붙다 업됩니다 잘)하지만 (예제 this page를 참조 등 FF에서 작동하지 않습니다 - 올바른 사용에 대한 링크이 이론 -! 내가 그것을 해결하기 위해 시도 알아야한다) 그러나

, 여기에 왼쪽 필드에서 생각입니다 - 조금 있지만,이 문제를과 복잡함을 보일 수 있습니다 ...

JQuery treeMap?

http://newsmap.js으로 이동하고 뇌가 어떻게 작동하는지 알아 봅니다. 그것은 미친 소리가 나지만, 그, 그리고 treeMap 당신이 달성하고자하는 더 복잡한 버전입니다.

롭