CSS가있는 동일한 높이 요소

높이가 다른 열이나 요소를 시뮬레이트하기 위해 여러 가지 솔루션을 읽었지 만 해킹, 엄청나게 복잡한 HTML 레이아웃 또는 널리 지원되지 않는 특성을 사용했기 때문에 그 중 아무 것도 내 관심을 끌지 못했습니다.CSS가있는 동일한 높이 요소

다음은 예제 Fiddle입니다.

내 목표는 모든 요소의 높이가 같거나 적어도 행의 형제 중 최대 높이가되도록하는 것입니다.

행은 3 개의 요소로 구성됩니다 (이 경우 행 래퍼는 없지만 해당 컨테이너 요소를 추가 할 수 있음).

용액이된다

가

는 JS
doesn't use display: table
음수 값
doesn't require exponential uses of divs and float

출처

2012-05-25 Simone Carletti

와 함께 넓은 심/마진을 사용하지 않는 필요없는이 당신이 만든 제한 : 아니, 그렇지 않아.

편집 : 당신이 언급하지 않았으므로 : 이것을 위해 테이블을 사용할 수 있습니다. (90s에 오신 것을 환영합니다)

출처

2012-05-25 12:31:33 Christoph

더 잘 말할 수 없었습니다. –

나는 똑같은 생각이었습니다. 아직도 나보다 똑똑한 누군가가 해결책을 찾을 수 있기를 바라고있다. 그래서 나는 그 질문에 대해 반대표를 던지고 그것을 즐겨 찾기에 추가했습니다. – Ana

@Ana 나는 같은 느낌을 가지고있다. 이것이 나의 질문의 이유이다. –

CSS3 flex 속성을 사용할 수 있습니다. 다음과 같이 쓰기 :

<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
</div>

확인

CSS 

.parent{ 
    display:-moz-box; 
    display:-webkit-box; 
    display:box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width:100%; 
    min-height:200px; 
} 

.parent div{ 
    background:red; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    border:2px solid green; 
}

HTML이 http://jsfiddle.net/VkPmg/2/

출처

2012-05-25 13:25:47 sandeep

꽤 멋지다. 그것은 IE와 함께 작동합니까? (적어도 최신 릴리스). –

@SimoneCarletti 아니,이게 당신에게이 해결책을 말하지 않은 이유가 아닙니다. http://caniuse.com/#search=flex – Christoph

IE가 지원되지 않지만 http : // flexiejs를 사용할 수 있습니다.com/for IE support – sandeep

당신은 수정 폭 레이아웃이있는 경우, 수있는 배경 이미지로 가짜. 테두리를 시뮬레이션하는 타일 이미지 배경을 상상해보십시오. 주 컨테이너에서 반복해야 할 것입니다.

예를 들어 100px 상자가 3 개 부동 한 400px 컨테이너 (예 : 피들)가있는 경우 주 컨테이너에서 1x400 이미지를 반복해야합니다. 이 이미지를 사용하는 테두리 색과 같은 좋은 x 위치 1 픽셀 모양으로 추가하십시오. 그리고 그것을 반복하십시오!

이 기술을 사용하면 상자의 높이가 실제로는 같지 않지만 표시가 상자 모양으로 표시되므로 상자가 높을수록 배경이 나타나고 배경이 표시됩니다.

출처

2012-05-25 14:23:03

CSS 둥근 모서리의 사용이 잘 적용되지 않기 때문에이 해킹을 사용할 수 없습니다 이 해결책에. –

CSS가있는 동일한 높이 요소

답변

관련 문제