내용이 가득 차면 Div가 페이지 아래로 밀려납니다.

Question

두 개의 상자가 나란히 있고 내용 (텍스트/이미지 등)으로 채워진 웹 페이지를 만들려고합니다.

<p><b>Text Here</b></p> 

<div id="col1"> 
    test 
</div> 

<div id="col2"> 
</div> 

CSS :

#col1 { 
    margin-right: 25px; 
} 

#col2 { 
    margin-left: 25px; 
} 

#col1, #col2 { 
    background: #ddd; 
    display: inline-block; 
    height: 300px; 
    padding: 15px; 
    width: 443px; 
} 

내가 제대로 float: right 및 float: left하지만 내 바닥 글 여백이 작동하지 않을를 사용하여 시도 (또한 slideToggle 효과이 내 코드

HTML의 일부입니다 나는 사용하고 있지 않다. 여기 JSFiddle 문제

http://jsfiddle.net/srCjs/

감사를 보여주고있다!

Answer 1

문제는 inline-block 요소 vertical-align의 기본값은 baseline 점이다 - 차단하거나 bottom에 수직 정렬 값을 변경 표시 값을 변경하고 요소가 같은 줄 것 예상 :

http://jsfiddle.net/srCjs/1/

#col1, #col2 { 
background: #ddd; 
display: inline-block; /* or change the display value */ 
height: 300px; 
padding: 15px; 
vertical-align: bottom; 
width: 443px; 
}