컨테이너 div는 플로팅 된 요소의 높이를 무시합니다.

좋아, 이것은 정말 어리석은 문제처럼 보입니다. 그러나 컨테이너 div가 내부에 떠 다니는 요소의 높이를 상속받을 수 없습니다. 컨테이너 div를 중앙에 배치해야하므로이 문제를 해결하기 위해 float을 사용할 수 없습니다.컨테이너 div는 플로팅 된 요소의 높이를 무시합니다.

#container { 
margin: 0 auto; 
width: 1000px; 
border-left: 1px solid #f1f1f1; 
border-right: 1px solid #f1f1f1; 
border-bottom: 1px solid #f1f1f1; 
} 

#focus { 
padding-left: 23px; 
width: 977px; 
padding-top: 20px; 
padding-bottom: 23px; 
border-bottom: 1px solid #f1f1f1; 
float: left; 
} 

.rslider { 
float: left; 
width: 600px; 
margin-left: 15px; 
} 

.welcome { 
float: left; 
width: 300px; 
}

HTML : :

<div id="container"> 
    <div id="logo_block"> 
    <a href="#"><img src="img/logo.jpg" alt="" /></a> 
    </div> 
    <div id="focus"> 
    <div class="welcome"> 
    <h1>All About This Page</h1> 
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, liquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> 
    </div> 
    <div class="rslider"> 
    <img src="img/slider_image.jpg"> 
    </div> 
    </div> 
    </div>

어떤 아이디어가 여기 내 CSS는 무엇입니까?

출처

2010-03-14 Thomas

당신은 이른바 clearfix을 찾고 있습니다.

출처

2010-03-14 16:59:23

일부 상황에서는 사용할 수없는 다른 메서드 (예 :'overflow : hidden' 또는'float')가 있음을 알고 있었지만,이 문제가 해결되었습니다 – betatester07

컨테이너 div는 플로팅 된 요소의 높이를 무시합니다.

답변

관련 문제