2012-04-16 4 views
0

div 4div 1이 펼쳐질 때 같은 위치를 유지하는 데 문제가 있습니다. 모든 div의는 내가 DIV 1, 3DIV 2를 포장 할 수없는 왼쪽 부동 내가 사업부를 확장 할 때 1 2도 2와 4확장형 divs

사이의 빈 공간을 남겨 확장 사업부를 확장

.subcatagory { 
    float: left; 
    width: 150px; 
} 
,536 : 별도의 div의

example

4
내가 div의에 사용하는 스타일
+0

어떤 브라우저를 지원 하시겠습니까? – fcalderan

+0

코드를 공유 할 수 있습니까 –

답변

2

float의 문제입니다. 이를 위해서는 Js masonry을 사용해야합니다. 기타 당신은 다음과 같은 마크 업을 정의 할 수 있습니다

<div class="parent"> 
    <div class="long">1</div> 
    <div>3</div> 
</div> 
<div class="parent"> 
    <div>2</div> 
    <div>4</div> 
</div> 

확인이 http://jsfiddle.net/XhMtK/1/

+0

감사합니다. 완벽하게 작동합니다. 그래도 모든 브라우저에서 지원됩니까? – Exploit

+0

예, 모든 브라우저를 지원합니다. – sandeep

2

다음은 당신이 찾고있는 무엇을 할 것입니다. 나는 그것의 너비를 설정하는 outters div에 모든 원래 div를 감쌌다. 그래서 나는 2 개의 div, 카테고리 (div1과 div3이이 클래스에 속한다)와 서로 오른쪽과 왼쪽으로 떠있는 하위 카테고리를 분류했다. 시연 할 코드는 다음과 같습니다.

<html> 
<head> 
    <style type="text/css"> 
    #dvMain{ 
    width:305px; 

    } 

    .subcategory, .category{ 
     width: 150px; 
     border:solid black 1px 
    } 

    .subcategory{ 
    float: right; 
    } 

    .category { 
    float: left; 
    } 
    </style> 
</head> 
<body> 
    <div id="dvMain"> 
    <div id="dv1" class="category">1asadssadsad 
    sadsa 
    ds 
    adsad 
    sa 
    dsadsadsadsa 
    </div> 
    <div id="dv2" class="subcategory">2</div> 
    <div id="dv4" class="subcategory">4</div> 
    <div id="dv3" class="category">3</div> 
    </div> 
</body> 
</html>