플로팅 div를 부모의 콘텐츠로 등록하는 방법은 무엇입니까?

좀 더 자세히 : 나는이 div의 하나 float:left, 다른 float:right있어, 내가 페이지 아래쪽으로 컨테이너의 부모를 주문할 수 있도록 부모가 clear:both입니다. 특정 CSS는 여기에 있습니다 :플로팅 div를 부모의 콘텐츠로 등록하는 방법은 무엇입니까?

#content { 
    margin-left:auto; 
    margin-right:auto; 
    width: 750px; 
    margin-top:50px; 
    position:relative; 
} 
.container-div { 
    padding-top:7px; 
    padding-bottom:10px; 
    clear:both; 
    background-color:#b0c4de; 
} 
.left-side { 
    float:left; 
} 
.right-side 
    float:right; 
}

문제는 부모의 background-color은 컨테이너의 상단에 작은 비트를 다루고 있다는 것입니다, 크롬 관리자는 내용이 분명히 해당 부분임을 보여줍니다. 뭐라 구요? 어떻게하면 div가 내용으로 float'ed div를 볼 수 있습니까? 이 아이들의 전체 높이에 걸릴하기 위해 부모

출처

2012-05-18 Alex

jsFiddle는 유용 할 수 있습니다 – jacktheripper

[CSS를 사용하여 2 열로 나누기] 가능한 복제본 (http://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css) – tybro0103

보십시오.

출처

2012-05-18 15:40:23 jacktheripper

' 오버 플로우 : hidden'도 또는 적절하지 않을 수 있습니다 (이 경우에 작동합니다 나는 당신이'분명합니다 :.. both'이 부모의 내부 요소에 적용해야 다음 일을하지만, 부유 요소 아래 누구든지을 downvoted - .. 감사합니다 – mrtsherman

좋은 점을 당신의 CSS를 배우고, 동의의 downvote는 특유의 : P – jacktheripper

.container-div이 display: inline-block;로 설정해야합니다 부모에 overflow: auto를 추가

출처

2012-05-18 15:45:19

귀하의 DOM 구조는 더 많거나 적은 100 %의 폭이 클래스 컨테이너와이

<div class="container-div"> 
    <div class="left-side"></div> 
    <div class="right-side"></div> 
</div>

부모 DIV처럼 보인다. 이제 자식 DIV 년대 100 % 폭을 취할 것 기본적으로, 그들에게 어떤 폭을주지 않고 부모 DIV 내에서 두 개의 자식 DIV 년대를 떠 위해 노력하고 있습니다. 자식 div의 너비를 atmost 50 %로 정의해야만 float 만 유효합니다.

이제 다음과 같은 코드

.clear{clear:both} 

.container-div { 
    padding-top:7px; 
    padding-bottom:10px; 
    background-color:#b0c4de; 
} 
.left-side { 
    float:left; 
    width=50%; 
} 
.right-side 
    float:right; 
    width=50%; 
}

을 시도하고이

<div class="container-div"> 
     <div class="left-side">your left divs content</div> 
     <div class="right-side">your right divs content</div> 
     <div class="clear"></div> 
</div>

는 이제 모든 것이 정확한 장소와 완벽하게 보여줍니다 크롬 관리자에 볼처럼 DOM이 보일 것입니다.

출처

2012-05-22 20:35:38

플로팅 div를 부모의 콘텐츠로 등록하는 방법은 무엇입니까?

답변

관련 문제