부모 div에서 div를 자동으로 구성하는 방법

다른 div 및 child div가 다른 너비와 높이를 갖습니다. 부모 div를 절대 위치 요소로 공간을 낭비하지 않고 자식 최대 효과와 함께 플로팅 할 수있는 방법은 무엇입니까?부모 div에서 div를 자동으로 구성하는 방법

예 :

이

http://jsfiddle.net/KSbjT

방향의 어떤 종류 발굴해야합니까?

HTML

<div class="parent" style="width: 500px; height: 500px; border: 1px solid #000; background: red; position: relative;"> 
    <div style="width: 100px; height: 200px; border: 1px solid #000; background: blue;"></div> 
    <div style="width: 200px; height: 500px; border: 1px solid #000; background: green;"></div> 
    <div style="width: 100px; height: 200px; border: 1px solid #000; background: yellow;"></div> 
    <div style="width: 100px; height: 200px; border: 1px solid #000; background: aqua; position: absolute; top: 200px"></div> 
</div>

CSS

.parent div { 
    float: left; 
}

출처

2013-08-28 user2560165

채우기에 대한 기본 설정은 무엇입니까? 왼쪽 오른쪽 ? –

left-right 나는 생각한다 – user2560165

이것은 꽤 복잡한 알고리즘이 될 것이지만, 나의 첫 번째 시작은 자식 div의 모든 축 (x, y)을 얻고, 모든 부모 div를 가능성에 따라 슬라이스한다. (오른쪽) 또는 다른 div (오른쪽) 또는 부모 div (오른쪽)의 가장자리를 때까지 "영역"을 추가하고 한 공간을 아래로 이동합니다. 다른 올바른 장벽이나 이전 스캔의 경계를 칠 때까지 영역을 추가하는 프로세스를 시작하십시오. –

나는 완전히 당신이 요구하는지 이해가 안하지만 난 당신이 이동, 그래서 만약 당신이 상대적으로 배치하기 위해 절대 위치 된 div를 변경해야 할 것 같아요 부모, 모든 친척이 그것에 상대적으로 움직일 것입니다.

출처

2013-08-28 13:21:37 BenM

첫째, 모든 자식 div가 절대 위치에 있어야한다고 생각합니다.) 다음에 무엇을 알지 못합니다.) – user2560165

그래, 어떻게 되길 원합니까? 상위 div 또는 하위 div에서 수행하고자하는 작업은 무엇입니까? – BenM

하위 div는 부모를 채워야합니다. 손실없이 공간을 최대한 활용하십시오 – user2560165

플로트와 다른 사람에 해당 된 div의 위치를 사용하여 당신은 대신이 사업부에 해당하는 위치의, div의 화면에 고정 된 위치에 의해 제어되지 않는 것입니다

position: relative;

보고 싶지 그 옆에.

당신의 HTML에 스타일 속성이 포함되지 않도록 HTML과 CSS를 분리하는 것이 좋습니다. 대신 CSS로 제어하는 HTML 클래스/ID를 더 많이 만들면 훨씬 편하고 읽기 쉽습니다. :

<div class="parent"> 
    <div id="blueGuy"></div> 
    <div id="greenGuy"></div> 
    <div id="yellowGuy"></div> 
    <div id="aquaGuy"></div> 
</div>

Wherea, 예를 들어, blueGuy은 더 나은이 국경과 폭 예를 들어, 당신은 클래스로 추가 할 다시 사용할 수 있습니다 모양을 분류하는 것이

#blueGuy 
{ 
    width: 100px; 
    height: 200px; 
    border: 1px solid #000; 
    background: blue; 
}

과 같을 것이다 /신장.

출처

2013-08-28 13:37:03 Jonast92

부모 div에서 div를 자동으로 구성하는 방법

답변

관련 문제