경계가있는 3 개의 열에 반응하는 동일한 높이. CSS로 만드는 방법?

Question

높이가 같고 각 섹션간에 경계선이 있고 응답 성을 유지하는 여러 개의 열을 만드는 방법 (아래 이미지 참조). 두 개의 열이 있으면 배경 이미지를 사용할 수 있다는 것을 알고 있지만 더 많은 부분이 나타나면 전체 응답 부분이 진행됩니다.

편집은 :을 heres jsfiddle 나는했습니다 : http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 1

왼쪽에서 1/3 경계선이 있고 오른쪽에서 1/3 오른쪽 경계선이있는 이미지는 약 두 개의 bg 이미지입니까? 그런 다음 각각 background-position:33.3% 0; 및 background-position:66.6% 0; 인 컨테이너 한 쌍에 적용하십시오.

중간에 테두리가 하나의 이미지를 사용하여 유사

및 background-position:50% 0;

편집 :

이 작동하는 것 같다,하고 반응/유체의 quick test를 실행 한 후.

HTML

<div class="container"> 
    <div class="bg1"> 
     <div class="bg2"> 
      <div class="content">...</div> 
     </div> 
    </div> 
</div> 

CSS

.container {width:100%; border:2px solid #000;} 

/* Tile a 2x1 image for the border */ 
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;} 
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;} 

편집 2 :

이 .content에서 height:200px;을 제거하고 높이가 증가 할 수 있음을 표시하려면 demo에 텍스트 컨텐츠를 추가 콘텐츠를 기반으로합니다. 두 개의 bg 이미지를 단일 2x1 이미지로 대체했습니다.

Answer 2

당신은 매튜 제임스 테일러의 솔루션에서 좀 걸릴 수 있습니다 테두리가있는 셀이있는 테이블을 사용하는 것이지만 손에 많은 시간을 할애한다면 @nebulousGirl이 제안한 CSS 방식이 그 길입니다.

Answer 3

이를 달성하는 가장 간단한 방법은 다음과 같습니다 http://jsfiddle.net/kF9LA/

Answer 4

유사한 스레드에서 몇 가지 답변을 얻었습니다 here. 가장 좋은 방법은 사용자가 시각적으로 divs가 동일한 높이를 볼 필요가 완전히 전적으로 달려 있습니다. 최종 사이트가이 목업 (경계가되는 유일한 시각적 신호)처럼 보일 경우 반드시 MJT의 방법을 사용할 필요가 없으며 대신 this과 같은 배경 이미지를 사용할 수 있습니다.

위의 링크의 주석에서 설명한 것처럼이 방법은 수평 유체 레이아웃에는 사용할 수 없지만 고정 너비 레이아웃이있는 경우 원하는만큼의 열에 대해 배경 이미지를 사용할 수 있습니다. 그냥 당신이 맞는지 확인하십시오.

그러나 레이아웃이 완전히 유동적 일 필요가 있다면 MJT의 방법이 가장 좋습니다. 여분의 마크 업이 필요하지만 방탄입니다.