CSS 비 스트레칭 박스

Question

내 레이아웃에 대한 질문이 있습니다. 나는이 같은 설정 뭔가가 :

<div id="container"> 
    <div id="body"> 
     <div id="item"> 
     </div> 
     <div id="item"> 
     </div> 
    </div> 
</div> 

을 그리고 몸 상자 내가 그것을 넣어 항목의 양을 스트레칭하고 싶지만 그렇지 않습니다. 누구든지이 문제를 css로 해결하는 방법을 알고 있습니다.

Answer 1

상품이 플로팅 된 경우 clear: both; 매개 변수가 설정된 블록을 추가 할 수 있습니다 (Pat가 이미 언급 했음). 당신은 당신의 코드에서 또 하나 개의 요소를 원하지 않는 경우

, 당신의 몸에 overflow: hidden;을 적용 할 수 : 신체 상자 밖에서 스틱 모든 절단 될 것이다

<div id="container"> 
    <div id="body" style="overflow: hidden;"> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
</div> 

는하지만주의 하시고.

Answer 2

먼저 페이지에서 ID가 고유해야하므로 항목 div의 클래스를 사용해야합니다. 둘째로, 이것은 아마도 귀하의 상품 div가 떠 다니는 것으로 인해 발생했을 것입니다. (그것을 시도하지 않은 display: inline도 작동 할 수 있습니다)

<div id="container"> 
    <div id="body"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div style="clear: both"></div> 
    </div> 
</div> 

Answer 3

이 당신의 품목이 왼쪽 및 float 된 div 적이, 그리고 display:inline-block;에 몸 사업부의 표시를 설정 : 당신이 그들 아래에 청산 요소를 추가하는 경우, 그것을 수정해야 . 그 내용에 맞게 축소해야합니다.

신속하고 더러운 :

<div id="container"> 
    <div id="body" style="display:inline-block; overflow: auto;"> 
     <div class="item" style="float: left;"> 
      Hi 
     </div> 
     <div class="item" style="float: left"> 
      There 
     </div> 
    </div> 
</div> 

편집 : 고정, 마 사치에 감사합니다.

Answer 4

필자는 인라인 블록 사용을 개인적으로 권장하지 않으며 이전 버전에서는 Internet Explorer 지원이 좋지 않으므로 개인적으로 사용하지 마십시오.

IE 6-8 (8 호환 모드에만 해당)에 문제가 있습니다.