이 문제에 대한 일반적인 솔루션은 절대 위치 또는 자르기 부동을 사용하지만 열의 수 + 크기가 변경되면 광범위한 조정이 필요하고 “주”열이 항상 가장 길어야한다는 점에서 까다 롭습니다. 대신 세 가지 강력한 솔루션 중 하나를 사용하는 것이 좋습니다.

1. display: flex: 가장 단순하고 최상의 솔루션 이며 매우 유연하지만 IE9 및 이전 버전에서는 지원되지 않습니다.
2. table또는 display: table: 매우 간단하고, 매우 호환 가능하며 (대부분의 모든 브라우저에서) 매우 유연합니다.
3. display: inline-block; width:50% 마이너스 마진 핵 : 매우 간단하지만 열 아래쪽 테두리는 약간 까다 롭습니다.

1. display:flex

이것은 매우 간단하고 더 복잡하거나 더 자세한 레이아웃에 쉽게 적용 할 수 있지만 flexbox는 IE10 이상에서만 지원됩니다 (다른 최신 브라우저 포함).

예 : http://output.jsbin.com/hetunujuma/1

관련 HTML :

<div class="parent"><div>column 1</div><div>column 2</div></div>

관련 CSS :

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox는 훨씬 더 많은 옵션을 지원하지만, 위의 열만으로도 충분합니다!

2. <table>또는display: table

간단한 &이 작업을 수행하는 매우 호환 방법은 사용하는 것입니다 table– 당신이 오래된 IE의 지원이 필요한 경우 첫 번째 시도 권하고 싶습니다 . 열을 다루고 있습니다. divs + floats는 단순히 그렇게하는 가장 좋은 방법은 아닙니다 (CSS 제한을 해킹하기 위해 여러 수준의 중첩 된 div가 단순한 테이블을 사용하는 것보다 거의 “의미 적”이라는 사실은 말할 것도 없습니다). table요소 를 사용하지 않으려면 cssdisplay: table (IE7 및 이전 버전에서는 지원되지 않음)를 고려하십시오.

예 : http://jsfiddle.net/emn13/7FFp3/

관련 HTML : (그러나<table>대신일반 사용을 고려하십시오)

<div class="parent"><div>column 1</div><div>column 2</div></div>

관련 CSS :

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

이 접근 방식은 overflow:hidden플로트를 사용 하는 것보다 훨씬 강력 합니다. 거의 모든 열을 추가 할 수 있습니다. 원하는 경우 자동 크기 조정 을 수행 할 수 있습니다 . 고대 브라우저와의 호환성을 유지합니다. float 솔루션의 요구 사항과 달리 어떤 열이 가장 긴지 미리 알 필요가 없습니다 . 높이가 잘 맞습니다.

KISS : 특별히 필요하지 않은 경우 플로트 핵을 사용하지 마십시오. IE7이 문제가 되더라도 유지 관리가 어렵고 유연성이 떨어지는 트릭 CSS 솔루션에서 의미 열이있는 일반 테이블을 계속 선택합니다.

그건 그렇고, 당신은 당신의 레이아웃을 필요로하는 경우 당신은 사용할 수 있습니다 응답 (작은 휴대 전화에 대한 예에는 열) 수 없습니다 @media사용 여부를이 작품 – 작은 화면 폭에 대한 일반 블록 레이아웃에 다시 가을에 질의를 <table>하거나 다른 display: table요소입니다.

3. display:inline block부정적인 마진 해킹.

또 다른 대안은을 사용하는 것 display:inline block입니다.

예 : http://jsbin.com/ovuqes/2/edit

관련 HTML : (div태그사이에 공백이 없으면중요합니다!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

관련 CSS :

.parent {
    position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}

.parent>div {
    display:inline-block; width:50%; white-space:normal; vertical-align:top;
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px;
}

이것은 약간 까다 롭고 음수 여백은 열의 “진정한”하단이 가려져 있음을 의미합니다. 이것은 결국 열이 잘려서 열의 맨 아래를 기준으로 아무것도 배치 할 수 없음을 의미합니다 overflow: hidden. 인라인 블록 외에도 플로트와 비슷한 효과를 얻을 수 있습니다.

TL; DR : IE9 이상을 무시할 수 있으면 flexbox를 사용 하십시오 . 그렇지 않으면 (css) 테이블을 시도하십시오. 이러한 옵션 중 어느 것도 효과가 없다면 부정적인 마진 해킹이 있지만 개발 중에 놓치기 쉬운 이상한 디스플레이 문제가 발생할 수 있으며 알아야 할 레이아웃 제한이 있습니다.

답변

display: flex;

align-items: stretch;

.parent {
  overflow: hidden;
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

div.parent { height: 300px };

div.child-right { height: 100% };

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>