컨테이너 div가 수평으로 수직으로 넘치지 만

Question

나는 컨테이너 내부에 두 개의 열을 사용하는 웹 사이트에서 작업하고 있습니다. 컨테이너에는 가장 높은 열의 맨 아래까지 늘어나는 흰색 배경이 있으므로 여기에 holy grail 메서드를 사용하고 있습니다.

그러나 두 열 모두 흰색 배경 (유동적이어야하는 고정 높이를 사용하는 this example)을 초과하도록 배치해야합니다. 지금까지 내가 아는 한, 이것은 오버 플로우를 가시적으로 설정함으로써 만 가능하지만, 이것은 컬럼의 동일한 높이를 깨뜨린다.

가능한 한 적은 추가 요소로 어떻게 수정합니까?

Answer 1

이 경우 가장 쉬운 해결 방법은 #container의 닫기 태그 앞에 <br style="clear:both" />을 추가하는 것 같습니다.

원하는 경우 <br class="clearfix" /> 및 .clearfix{clear:both}으로 변경할 수 있습니다.

Answer 2

해결 inline-block 소자를 사용하는 것이다 ..

CSS는

.container{ 
    width:300px; 
    background-color:#ccc; 
    margin:0 auto; 
    border:1px solid red; 
} 
.container > div{ 
    width:150px; 
    display:inline-block; 
    vertical-align:top; 
} 
.inner{ 
    background-color:#666; 
    margin-top:10px; 
    width:130px; 
} 
.left .inner{ 
    margin-left:-10px; 
} 
.right .inner{ 
    margin-right:-10px; 
    margin-left:auto; 
} 

HTML

<div class="container"> 
    <div class="left"> 
     <div class="inner">left 1st inner panel</div> 
     <div class="inner">left 2nd inner panel</div> 
    </div><div class="right"> 
     <div class="inner">right 1st inner panel</div> 
     <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div> 
    </div> 
</div> 

view demo