빈 지우기 div를 피하는 방법?

Question

나는 다음과 같이 최근에 수레를 많이 사용하고있다 :

<div id="buttons"> 
    <input type="button" id="btn1" value="Button One"> 
    <input type="button" id="btn2" value="Button Two"> 
    <input type="button" id="btn3" value="Button Three"> 
</div> 

은 가끔 오른쪽에 단추를 떠 있습니다. 가끔은 모든 것을 오른쪽으로 띄울 것입니다. 문제가 시작되는 곳입니다.

<div style="clear:both;"></div> 

말 : 정말 내가 그렇게 나는이에 넣어 보관해야한다는한다면 오프 흐름을 던졌습니다. 만약 내가 이 아니라면이 떠 다니면 레이아웃이 사라집니다.

좋은 해결책이 있습니까?

Answer 1

예는, 컨테이너 예에 overflow: hidden를 사용

이

<style type="text/css"> 
#buttons { overflow: hidden; } 
</style> 

Answer 2

이것은 CSS 학습 곡선의 큰 부분이다. 항목을 부양하면 포함하는 요소가 더 이상 떠 다니는 요소의 세로 높이를 고려하지 않습니다. 당신의 딜레마를 극복하기 위해 사용할 수있는 몇 가지 해결책이 있습니다.

단순히 버튼의 높이에 #button 컨테이너의 높이를 지정

#button { height: 30px; } 

애호가 솔루션은 clearfix 해킹 될 것입니다. 그것은 꽤 탄탄하며, 추가 마크 업과 인라인 CSS를 추가 할 필요없이 트릭을 수행 할 것입니다.

Answer 3

부모의 오버플로를 정의하면 모든 수레가 지워집니다.

오버플로를 사용하십시오 : 부모에게 자동으로 사용하십시오.

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

는 (나는이 디스플레이를 사용하여 작동 들었다 : 물론 상속,하지만 시도하지 않았습니다.)

Answer 4

보통, 최고의 옵션은 clearfix method 또는 설정하는 방법입니다 '오버플로 : 숨겨진' 포함하는 부모에게. 특정 예에서

다른 옵션이 수행이 전혀 입력 중 하나를 뜨지 수 있으며, 설정 '텍스트 정렬 : 바로'#buttons에를

#buttons { 
    text-align: right; 
    } 

내가 오버 플로우 '에 의존하는 동안 : hidden '꽤 많은데,'overflow : hidden '이 설정된 포함 요소의 바깥 쪽 (또는 부분적으로 바깥 쪽)에 요소를 배치하려고하면 위치가 지정된 요소가에서 잘립니다. 포함하는 요소의 경계 (이것은 너무 자주 나오지는 않지만 조심해야 할 "잡았다"입니다.)

재미있는 내용은 the blog post "Lessons Learned Concerning the Clearfix CSS Hack" by Jeff Starr입니다.

Answer 5

CSS를 사용하여 항목을 플로팅하면 자연스러운 페이지 흐름 상태에서 제거됩니다.

컨테이너에있는 경우 DIV 항목을 이동하면 해당 항목이 이동되고 해당 항목의 부모가 자식 요소가없는 곳을 볼 수 없습니다. 컨테이너는 그때 요소가 첫 번째 장소에조차없는 것처럼 많은 지역의 복싱으로 축소됩니다.

이를 처리하려면 컨테이너 속성으로 overflow:hidden을 지정해야합니다.

기본적으로이 값은 visible으로 설정되어 있기 때문에 상자가 떠 다니는 경우 아무 것도 상자에서 빠져 나올 수 있습니다.

이

#buttons 
{ 
    overflow:hidden; 
} 

이 이제 부모 DIV의 맥락과 범위 내에서 보여 부동 요소를 제한됩니다 : 당신의 CSS에서이 설정하여 그것을

수정.